open-index/open-npm huggingface dataset:
npm package: @igloo-ui/action-menu
Description: This component is used to display a menu that will contain a list of menu options. The menu is dismissible if you click outside the dropdown.
Author: Officevibe Inc.
Latest version: 2.1.0

# ActionMenu

This component is used to display a menu that will contain a list of menu options. The menu is dismissible if you click outside the dropdown.

<Example is="custom" />
<ReferenceLinks is="custom" />

## Installation

To install `@igloo-ui/action-menu` in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```bash
npm install @igloo-ui/action-menu
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```bash
yarn add @igloo-ui/action-menu
```

## Usage

Then to use the component in your code just import it!

### Displaying an action menu

```jsx
import ActionMenu from '@igloo-ui/action-menu';
import Button from '@igloo-ui/button';

<ActionMenu
  options={[
    {
      label: 'Add Item',
      value: 'add',
    },
    {
      label: 'Delete Item',
      value: 'delete',
      disabled: true,
    },
    {
      label: 'Copy Item',
      value: 'copy',
    },
  ]}
  renderReference={(refProps) => {
    return (
      <Button appearance="secondary" {...refProps}>
        Button
      </Button>
    );
  }}
/>;
```

### Calling option events

```jsx
import ActionMenu from '@igloo-ui/action-menu';
import Button from '@igloo-ui/button';

<ActionMenu
  options={[
    {
      label: 'Add Item',
      value: 'add',
      icon: <AddSolid size="medium" />,
      onClick: () => {
        alert('"Add Item" was clicked');
      },
    },
    {
      label: 'Delete Item',
      value: 'delete',
      icon: <Delete size="medium" />,
      onClick: () => {
        alert('"Delete Item" was clicked');
      },
      closeOnSelect: () => {
        // Put some condition here
        // It can also just be a boolean and not a function
        return false;
      },
    },
    {
      label: 'Copy Item',
      value: 'copy',
      icon: <Copy size="medium" />,
      onClick: () => {
        alert('"Copy Item" was clicked');
      },
    },
  ]}
  renderReference={(refProps) => {
    return (
      <Button appearance="secondary" {...refProps}>
        Button
      </Button>
    );
  }}
/>;
```
npm package: @igloo-ui/alert
Description: Use to highlight information for the user that requires his attention.<br/> Alerts can be position at the top of the page or into other components.
Author: Officevibe Inc.
Latest version: 1.0.0

# Alert

Use to highlight information for the user that requires his attention.<br/> Alerts can be position at the top of the page or into other components.

<Example is="custom" />

<ReferenceLinks is="custom" />

## Installation

To install `@igloo-ui/alert` in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```bash
npm install @igloo-ui/alert
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```bash
yarn add @igloo-ui/alert
```

## Usage

Then to use the component in your code just import it!

```jsx
import Alert from '@igloo-ui/alert';

<Alert type="info" title="Alert title" message="Alert message" />;
```
npm package: @igloo-ui/area-chart
Description: The area chart is a line chart with shading below the line. This area chart depicts score over time.
Author: Officevibe Inc.
Latest version: 3.0.0

# AreaChart

The area chart is a line chart with shading below the line. This area chart depicts score over time.

<Example is="custom" />

<ReferenceLinks is="custom" />

## Installation

To install `@igloo-ui/area-chart` in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```bash
npm install @igloo-ui/area-chart
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```bash
yarn add @igloo-ui/area-chart
```

## Usage

Then to use the component in your code just import it!

```jsx
import AreaChart from '@igloo-ui/area-chart';

const nFormatter = (num) => {
  const lookup = [
    { value: 1, symbol: '' },
    { value: 1e3, symbol: 'k' },
    { value: 1e6, symbol: 'M' },
    { value: 1e9, symbol: 'B' },
    { value: 1e12, symbol: 'T' },
  ];
  const digits = 2;
  const rx = /\.0+$|(\.[0-9]*[1-9])0+$/;
  const item = lookup
    .slice()
    .reverse()
    .find(function (item) {
      return num >= item.value;
    });
  return item
    ? (num / item.value).toFixed(digits).replace(rx, '$1') + item.symbol
    : '0';
};

<AreaChart
  scoreFormatter={nFormatter}
  dateRange={{
    start: '2022-10-01',
    end: '2022-10-07',
  }}
  dataSet={[
    {
      dateTimeStamp: '2022-10-01',
      score: 48878,
      name: 'sent',
      secondaryName: 'sent',
    },
    {
      dateTimeStamp: '2022-10-02',
      score: 49879,
      name: 'sent',
      secondaryName: 'sent',
    },
    {
      dateTimeStamp: '2022-10-03',
      score: 33587,
      name: 'sent',
      secondaryName: 'sent',
    },
    {
      dateTimeStamp: '2022-10-04',
      score: 45445,
      name: 'sent',
      secondaryName: 'sent',
    },
    {
      dateTimeStamp: '2022-10-05',
      score: 34534,
      secondaryScore: 30000,
      name: 'sent',
      secondaryName: 'sent',
    },
    {
      dateTimeStamp: '2022-10-06',
      score: 34555,
      secondaryScore: 52677,
      name: 'sent',
      secondaryName: 'sent',
    },
    {
      dateTimeStamp: '2022-10-07',
      score: 67897,
      name: 'sent',
      secondaryName: 'sent',
    },
  ]}
/>;
```
npm package: @igloo-ui/avatar
Description: An image icon used to identify a user.
Author: Officevibe Inc.
Latest version: 0.6.0

# Avatar

An image icon used to identify a user.

<Example is="custom" />

<ReferenceLinks is="custom" />

## Installation

To install `@igloo-ui/avatar` in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```bash
npm install @igloo-ui/avatar
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```bash
yarn add @igloo-ui/avatar
```

## Usage

Then to use the component in your code just import it!

```jsx
import Avatar from '@igloo-ui/avatar';

<Avatar src="https://randomuser.me/api/portraits/men/10.jpg" />;
```
npm package: @igloo-ui/bar-chart
Description: Bar charts should be used when you are showing segments of information.
Author: Officevibe Inc.
Latest version: 0.6.0

# BarChart

Bar charts should be used when you are showing segments of information.

<Example is="custom" />

<ReferenceLinks is="custom" />

## Installation

To install `@igloo-ui/bar-chart` in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```bash
npm install @igloo-ui/bar-chart
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```bash
yarn add @igloo-ui/bar-chart
```

## Usage

Then to use the component in your code just import it!

```jsx
import BarChart from '@igloo-ui/bar-chart';

const data = [
    {
      label: 'Good vibes',
      value: 48,
      color: '#FBC73B',
    },
    {
      label: 'Excellence',
      value: 46,
      color: '#6893FF',
    },
]

<BarChart dataSet={data} />
```
npm package: @igloo-ui/breadcrumb
Description: Breadcrumbs allow users to orient themselves in the hierarchy of the app. It also provides a way to navigate to the parent page.
Author: Officevibe Inc.
Latest version: 1.0.0

# Breadcrumb

Breadcrumbs allow users to orient themselves in the hierarchy of the app. It also provides a way to navigate to the parent page.

<Example is="custom" />

<ReferenceLinks is="custom" />

## Installation

To install `@igloo-ui/breadcrumb` in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```bash
npm install @igloo-ui/breadcrumb
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```bash
yarn add @igloo-ui/breadcrumb
```

## Usage

Then to use the component in your code just import it!

```jsx
import Breadcrumb from '@igloo-ui/breadcrumb';

<Breadcrumb
  items={[
    {
      label: 'Home',
      link: '#',
    },
    {
      label: 'Career',
      link: '#',
    },
    {
      label: 'Developer',
    },
  ]}
/>;
```
npm package: @igloo-ui/button
Description: Buttons are used primarily for user interaction.
Author: Officevibe Inc.
Latest version: 0.12.0

# Button

Buttons are used primarily for user interaction.

<Example is="custom" />

<ReferenceLinks is="custom" />

## Installation

To install `@igloo-ui/button` in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```bash
npm install @igloo-ui/button
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```bash
yarn add @igloo-ui/button
```

## Usage

Then to use the component in your code just import it!

```jsx
import Button from '@igloo-ui/button';

<Button>Primary</Button>;
```
npm package: @igloo-ui/button-group
Description: ButtonGroup displays multiple related actions or options stacked in a horizontal row to help with arrangement and spacing.
Author: Officevibe Inc.
Latest version: 0.7.0

# ButtonGroup

ButtonGroup displays multiple related actions or options stacked in a horizontal row to help with arrangement and spacing.

<Example is="custom" />

<ReferenceLinks is="custom" />

## Installation

To install `@igloo-ui/button-group` in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```bash
npm install @igloo-ui/button-group
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```bash
yarn add @igloo-ui/button-group
```

Then to use the component in your code just import it!

```jsx
import ButtonGroup, { ButtonItem } from '@igloo-ui/button-group';

<ButtonGroup>
  <ButtonItem>Label 1</ButtonItem>
  <ButtonItem>Label 2</ButtonItem>
</ButtonGroup>;
```
npm package: @igloo-ui/card
Description: Cards are used to group similar concepts and tasks to make it easier for users to scan, read, and get things done.
Author: Officevibe Inc.
Latest version: 0.4.0

# Card

Cards are used to group similar concepts and tasks to make it easier for users to scan, read, and get things done.

<Example is="custom" />

<ReferenceLinks is="custom" />

## Installation

To install `@igloo-ui/card` in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```bash
npm install @igloo-ui/card
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```bash
yarn add @igloo-ui/card
```

## Usage

Then to use the component in your code just import it!

```jsx
import Card from '@igloo-ui/card';

<Card>Card content</Card>;
```
npm package: @igloo-ui/carousel
Description: A carousel allows users to see and navigate the steps within a flow.
Author: Officevibe Inc.
Latest version: 0.5.0

# Carousel

A carousel allows users to see and navigate the steps within a flow.

<Example is="custom" />

<ReferenceLinks is="custom" />

## Installation

To install `@igloo-ui/carousel` in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```bash
npm install @igloo-ui/carousel
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```bash
yarn add @igloo-ui/carousel
```

## Usage

Then to use the component in your code just import it!

```jsx
import Button from '@igloo-ui/button';
import Carousel from '@igloo-ui/carousel';

const SLIDE_NUM = 3;
const [selected, setSelected] = React.useState(0);

const handlePageChange = (index) => {
  setSelected(index);
};

const handlePrimaryActionClick = () => {
  if (selected < SLIDE_NUM - 1) {
    handlePageChange(selected + 1);
  }
};

const handleSecondaryActionClick = () => {
  if (selected > 0) {
    handlePageChange(selected - 1);
  }
};

<Carousel
  onPageChange={handlePageChange}
  currentSlide={selected}
  primaryAction={
    <Button appearance={'primary'} onClick={handlePrimaryActionClick}>
      {selected < SLIDE_NUM - 1 ? 'Next' : 'Done'}
    </Button>
  }
  secondaryAction={
    <Button appearance={'secondary'} onClick={handleSecondaryActionClick}>
      {selected > 0 ? 'Prev' : 'Cancel'}
    </Button>
  }
>
  <div style={{ background: 'pink', padding: '4rem' }}>Slide 1</div>
  <div style={{ background: 'lightBlue', padding: '4rem' }}>Slide 2</div>
  <div style={{ background: 'lightGreen', padding: '4rem' }}>Slide 3</div>
</Carousel>;
```
npm package: @igloo-ui/checkbox
Description: Checkboxes are most commonly used to give users a way to make a range of selections (zero, one, or multiple). They may also be used as a way to have users indicate they agree to specific terms and services.
Author: Officevibe Inc.
Latest version: 0.7.0

# Checkbox

Checkboxes are most commonly used to give users a way to make a range of selections (zero, one, or multiple). They may also be used as a way to have users indicate they agree to specific terms and services.

<Example is="custom" />

<ReferenceLinks is="custom" />

## Installation

To install `@igloo-ui/checkbox` in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```bash
npm install @igloo-ui/checkbox
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```bash
yarn add @igloo-ui/checkbox
```

## Usage

Then to use the component in your code just import it!

```jsx
import Checkbox from '@igloo-ui/checkbox';

<Checkbox htmlFor="checkbox-id">Label</Checkbox>;
```
npm package: @igloo-ui/color
Description: A color can be used in place of an avatar. The background color and text color are customizable.
Author: Officevibe Inc.
Latest version: 0.7.0

# Color

A color can be used in place of an avatar. The background color and text color are customizable.

<Example is="custom" />

<ReferenceLinks is="custom" />

## Installation

To install `@igloo-ui/color` in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```bash
npm install @igloo-ui/color
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```bash
yarn add @igloo-ui/color
```

## Usage

Then to use the component in your code just import it!

```jsx
import Color from '@igloo-ui/color';

<Color
  color="#FFC3BA"
  textColor="#6B2837"
  size="large"
  name="Awesome Possum Team"
/>;
```
npm package: @igloo-ui/color-picker
Description: Color pickers allow users to assign a color to a given element.
Author: Officevibe Inc.
Latest version: 3.0.0

# ColorPicker

Color pickers allow users to assign a color to a given element.

<Example is="custom" />

<ReferenceLinks is="custom" />

## Installation

To install `@igloo-ui/color-picker` in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```bash
npm install @igloo-ui/color-picker
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```bash
yarn add @igloo-ui/color-picker
```

## Usage

Then to use the component in your code just import it!

```jsx
import ColorPicker from '@igloo-ui/color-picker';

const [selectedColor, setSelectedColor] = React.useState("dandelion200");

<ColorPicker 
    onSelect={
        (color) => {
            setSelectedColor(color);
        }          
    } 
    selectedColor={selectedColor} 
/>
```
npm package: @igloo-ui/combobox
Description: A combobox has all the features a select does as well as filtering and clearing results.
Author: Officevibe Inc.
Latest version: 4.0.0

# Combobox

A combobox has all the features a select does as well as filtering and clearing results.

<Example is="custom" />

<ReferenceLinks is="custom" />

## Installation

To install `@igloo-ui/combobox` in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```bash
npm install @igloo-ui/combobox
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```bash
yarn add @igloo-ui/combobox
```

## Usage

Then to use the component in your code just import it!

```jsx
import Combobox from '@igloo-ui/combobox';

const optionList = [
  {
    label: 'Text 1',
    value: '1',
  },
  {
    label: 'Text 2 (disabled)',
    value: '2',
    disabled: true,
  },
  {
    label:
      'Text 3. I will put a lot of text here to see how it behaves. Hopefully it looks good!',
    value: '3',
    color: '#74DCC9',
  },
];

<Combobox options={optionList} search clear clearTooltipText="Remove Mapping">
  Place holder text
</Combobox>;
```
npm package: @igloo-ui/datepicker
Description: Date pickers let users choose dates from a visual calendar that’s consistently applied wherever dates need to be selected.
Author: Officevibe Inc.
Latest version: 1.0.0

# Datepicker

Date pickers let users choose dates from a visual calendar that’s consistently applied wherever dates need to be selected.

<Example is="custom" />

<ReferenceLinks is="custom" />

## Installation

To install `@igloo-ui/datepicker` in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```bash
npm install @igloo-ui/datepicker
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```bash
yarn add @igloo-ui/datepicker
```

## Usage

Then to use the component in your code just import it!

```jsx
import Datepicker from '@igloo-ui/datepicker';

const [showDatepicker, setShowDatepicker] = useState(false);
const [date, setDate] = useState('2022-09-30T00:00:00Z');

useEffect(() => {
  setShowDatepicker(false);
}, [date]);

const formatedDate = new Date('2022-09-30T00:00:00Z').toLocaleDateString();

<Datepicker
  ariaLabel="Event date"
  placeholder="Select date"
  selectedDay={date}
  value={formatedDate}
  isOpen={showDatepicker}
  onClose={() => setShowDatepicker(false)}
  onChange={(date) => setDate(date.utc)}
  onFocus={() => setShowDatepicker(!showDatepicker)}
/>;
```
npm package: @igloo-ui/dialog
Description: The Dialog is much like the Modal component, except it is simpler. It contains a title, sub title, dismiss action and a validate action.
Author: Officevibe Inc.
Latest version: 0.12.0

# Dialog

The Dialog is much like the Modal component, except it is simpler. It contains a title, sub title, dismiss action and a validate action.

<Example is="custom" />

<ReferenceLinks is="custom" />

## Installation

To install `@igloo-ui/dialog` in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```bash
npm install @igloo-ui/dialog
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```bash
yarn add @igloo-ui/dialog
```

## Usage

Then to use the component in your code just import it!

```jsx
import Dialog from '@igloo-ui/dialog';
import Button from '@igloo-ui/button';

const [open, setOpen] = React.useState(false);
const handleValidate = () => {
    alert("You said yes");
    setOpen(false);
};

<Button appearance="secondary" onClick={() => setOpen(true)}>
    open
</Button>
<Dialog
    title="Dialog title"
    subTitle="This is a sub title"
    dismissText="Cancel"
    validateText="Confirm"
    isOpen={open}
    onDismiss={() => setOpen(false)}
    onValidate={handleValidate}
/>
```

## Troubleshooting

**When a Dialog opens above a Modal**

In this case, when you close the Dialog, the Modal closes automatically. Here is a workaround to remedy this.

To solve the problem, set the `isClosable` property of the Modal to `false` when the Dialog component is up and then return to `true` when it closes.
npm package: @igloo-ui/disclosure
Description: A disclosure is a widget that toggles the visibility of content by clicking a button.
Author: Officevibe Inc.
Latest version: 2.1.0

# Disclosure

A disclosure is a widget that toggles the visibility of content by clicking a button.

<Example is="custom" />

<ReferenceLinks is="custom" />

## Installation

To install `@igloo-ui/disclosure` in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```bash
npm install @igloo-ui/disclosure
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```bash
yarn add @igloo-ui/disclosure
```

## Usage

Then to use the component in your code just import it!

```jsx
import Substract from '@igloo-ui/icons/dist/Substract';

import Disclosure from '@igloo-ui/disclosure';

<Disclosure
  title="Diversity"
  icon={<Substract size="large" />}
  description="0.8pt in the last 30 days"
>
  <div style={{ background: '#F7F9FA', padding: '2.4rem' }}>
    Our organization values diversity.
  </div>
</Disclosure>;
```
npm package: @igloo-ui/dropdown
Description: Displays a sub-element overlaid and renders the content
Author: Officevibe Inc.
Latest version: 2.1.0

# Dropdown

Displays a sub-element overlaid and renders the content

<Example is="custom" />

<ReferenceLinks is="custom" />

## Installation

To install `@igloo-ui/dropdown` in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```bash
npm install @igloo-ui/dropdown
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```bash
yarn add @igloo-ui/dropdown
```

## Usage

Then to use the component in your code just import it!

```jsx
import Dropdown from '@igloo-ui/dropdown';
import Button from '@igloo-ui/button';

const [show, setShow] = React.useState(false);

function List() {
  const listItem = items.map((item, key) => (
    <li key={`list-item_${key}`}>{item}</li>
  ));
  return <ul>{listItem}</ul>;
}

<Dropdown isOpen={show} onClose={() => setShow(false)} content={<List />}>
  <Button appearance="secondary" size="small" onClick={() => setShow(!show)}>
    Settings
  </Button>
</Dropdown>;
```
npm package: @igloo-ui/ellipsis
Description: Informs user that text is clipped.
Author: Officevibe Inc.
Latest version: 0.5.0

# Ellipsis

Informs user that text is clipped.

<Example is="custom" />

<ReferenceLinks is="custom" />

## Installation

To install `@igloo-ui/ellipsis` in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```bash
npm install @igloo-ui/ellipsis
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```bash
yarn add @igloo-ui/ellipsis
```

## Usage

Then to use the component in your code just import it!

```jsx
import Ellipsis from '@igloo-ui/ellipsis';

<Ellipsis>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vestibulum
  ex vel felis commodo auctor. Nulla pulvinar velit eget scelerisque mattis.
  Curabitur augue leo, gravida non quam at, viverra varius metus.
</Ellipsis>;
```
npm package: @igloo-ui/filter
Description: The filter component is a button that is used to filter the items of a list or table.
Author: Officevibe Inc.
Latest version: 0.7.0

# Filter

The filter component is a button that is used to filter the items of a list or table.

<Example is="custom" />
<ReferenceLinks is="custom" />

## Installation

To install `@igloo-ui/filter` in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```bash
npm install @igloo-ui/filter
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```bash
yarn add @igloo-ui/filter
```

## Usage

Then to use the component in your code just import it!

```jsx
import Filter from '@igloo-ui/filter';

<Filter
  onClick={() => {
    setSelected(!selected);
    alert('Filter was clicked');
  }}
  selected={selected}
>
  Assigned to me (5)
</Filter>;
```
npm package: @igloo-ui/form-group
Description: The FormGroup is a component that displays a label and an error message for a form input.
Author: Officevibe Inc.
Latest version: 2.1.0

# FormGroup

The FormGroup is a component that displays a label and an error message for a form input.

<Example is="custom" />

<ReferenceLinks is="custom" />

## Installation

To install `@igloo-ui/form-group` in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```bash
npm install @igloo-ui/form-group
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```bash
yarn add @igloo-ui/form-group
```

## Usage

Then to use the component in your code just import it!

```jsx
import FormGroup from '@igloo-ui/form-group';
import Input from '@igloo-ui/input';

<FormGroup label="Name" message="This field is required" showMessage>
  <Input type="text" placeholder="John Doe" error />
</FormGroup>;
```
npm package: @igloo-ui/helper-text
Description: Providing additional information about a form input.
Author: Officevibe Inc.
Latest version: 0.5.0

# HelperText

Providing additional information about a form input.

<Example is="custom" />

<ReferenceLinks is="custom" />

## Installation

To install `@igloo-ui/helper-text` in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```bash
npm install @igloo-ui/helper-text
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```bash
yarn add @igloo-ui/helper-text
```

## Usage

Then to use the component in your code just import it!

```jsx
import HelperText from '@igloo-ui/helper-text';

<HelperText>Additional information</HelperText>;
```
npm package: @igloo-ui/hyperlink
Description: Hyperlink are interactive elements that allow users to navigate in webpage.
Author: Officevibe Inc.
Latest version: 0.7.0

# Hyperlink

Hyperlink are interactive elements that allow users to navigate in webpage.

<Example is="custom" />

<ReferenceLinks is="custom" />

## Installation

To install `@igloo-ui/hyperlink` in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```bash
npm install @igloo-ui/hyperlink
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```bash
yarn add @igloo-ui/hyperlink
```

## Usage

Then to use the component in your code just import it!

```jsx
import Hyperlink from '@igloo-ui/hyperlink';

<Hyperlink>
  <a href="#">Link to ...</a>
</Hyperlink>;
```
npm package: @igloo-ui/icon-button
Description: IconButton are used primarily for actions.
Author: Officevibe Inc.
Latest version: 2.1.0

# IconButton

IconButton are used primarily for actions.

<Example is="custom" />

<ReferenceLinks is="custom" />

## Installation

To install `@igloo-ui/icon-button` in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```bash
npm install @igloo-ui/icon-button
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```bash
yarn add @igloo-ui/icon-button
```

## Usage

Then to use the component in your code just import it!

```jsx
import IconButton from '@igloo-ui/icon-button';
import Plus from '@igloo-ui/icons/dist/Plus';

<IconButton icon={<Plus size="small" />} />;
```
npm package: @igloo-ui/icons
Description: A set of icons handcrafted by Officevibe
Author: Groupe Officevibe Inc.
Latest version: 1.12.3

# `@igloo-ui/icons`

A set of icons handcrafted by Officevibe

## Getting started

To install @igloo-ui/icons in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```
npm install @igloo-ui/icons
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```
yarn add @igloo-ui/icons
```

## Usage

Icons in this package support the following sizes: `16`, `24`, and `32` pixels. You can import an icon component into your project by referring to its name:

```js
import Alert from '@igloo-ui/icons/dist/Alert';

function MyComponent() {
  return (
    <>
      <Alert /> Uh oh, something went wrong
    </>
  );
}
```

### Changing the size

You can change the size of an icon by passing a prop `size` which takes `small`, `medium` and `large`. For example:

```js
import Clock from '@igloo-ui/icons/dist/Calendar';

function MyComponent() {
  return (
    <>
      <Calendar size="large" /> Monday, Feb 2022
    </>
  );
}
```

| Prop     | Rendered Size                |
| -------- | ---------------------------- |
| `small`  | 16px                         |
| `medium` | 24px is the **default** size |
| `Large`  | 32px                         |

### Changing the color

You can change the color of an icon by passing in a custom class name that sets this property.

First install tokens

`yarn add @igloo-ui/tokens`

For example:

```css
@import '@igloo-ui/tokens/dist/variables.css';

.my-custom-class {
  color: var(--dandelion-600);
}
```

```js
import Alert from '@igloo-ui/icons/dist/Alert';

function MyComponent() {
  return (
    <>
      <Alert className="my-custom-class" /> Uh oh, something went wrong
    </>
  );
}
```

### Accessibility

If the icon used without text, then use the `ariaLabel` prop to give the icon a text alternative. The label should describe the icon.

```js
import Alert from '@igloo-ui/icons/dist/Alert';

function MyComponent() {
  return <Alert ariaLabel=" Uh oh, something went wrong" />;
}
```

## SVG files

For projects that don’t use React, icons are also available as \*.svg files in the `dist/svg` folder.

## License

Copyright © 2019, GSoft inc. This code is licensed under the Apache License, Version 2.0. You may obtain a copy of this license at https://github.com/gsoft-inc/gsoft-license/blob/master/LICENSE.
npm package: @igloo-ui/input
Description: Input enable the user to interact with and used for freeform data entry.
Author: Officevibe Inc.
Latest version: 3.1.0

# Input

Input enable the user to interact with and used for freeform data entry.

<Example is="custom" />

<ReferenceLinks is="custom" />

## Installation

To install `@igloo-ui/input` in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```bash
npm install @igloo-ui/input
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```bash
yarn add @igloo-ui/input
```

## Usage

Then to use the component in your code just import it!

```jsx
import Input from '@igloo-ui/input';

<Input type="text" placeholder="input type text" />;
```
npm package: @igloo-ui/list
Description: Lists render possible actions or selectable options for a given element. This component is usually placed under a kebab menu icon.
Author: Officevibe Inc.
Latest version: 0.12.0

# List

Lists render possible actions or selectable options for a given element. This component is usually placed under a kebab menu icon.

<Example is="custom" />

<ReferenceLinks is="custom" />

## Installation

To install `@igloo-ui/list` in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```bash
npm install @igloo-ui/list
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```bash
yarn add @igloo-ui/list
```

## Usage

Then to use the component in your code just import it!

```jsx
import List from '@igloo-ui/list';

const optionList = [
  {
    type: 'list',
    label: 'Item 1',
    value: '1',
    description: 'just adding some description',
  },
  {
    type: 'list',
    label: 'Item 2 (disabled)',
    value: '2',
    disabled: true,
  },
  {
    type: 'list',
    label: 'Item 3 (focused)',
    value: '3',
    description: 'just adding some description',
  },
  {
    type: 'list',
    label: 'Item 4 (selected)',
    value: '4',
  },
  {
    type: 'list',
    label: 'Item 5',
    value: '5',
    color: '#74DCC9',
  },
];

const [selectedOption, setSeletedOption] = React.useState(optionList[3]);
const [focusedOption, setFocusedOption] = React.useState(optionList[2]);

function handleOptionSelect(option) {
  setSeletedOption(option);
}

function handleOptionFocus(option) {
  setFocusedOption(option);
}

<List
  options={optionList}
  onOptionChange={handleOptionSelect}
  onOptionFocus={handleOptionFocus}
  selectedOption={selectedOption}
  focusedOption={focusedOption}
/>;
```
npm package: @igloo-ui/message
Description: Welcome to my `Message` component.
Author: Officevibe Inc.
Latest version: 0.1.0

# @igloo-ui/message

Welcome to my `Message` component.

## Installation

```sh
npm i @igloo-ui/message
# or with yarn
yarn add @igloo-ui/message
```

Then to use the component in your code just import it!

```js
import Message from '@igloo-ui/message';
// and with css-modules
import '@igloo-ui/Message/dist/message.css';
```
npm package: @igloo-ui/metric
Description: A metric component is a button that visually represents a specific metric or measurement. It provides a concise and interactive way for users to access important information or track key performance indicators.
Author: Officevibe Inc.
Latest version: 1.0.0

# Metric

A metric component is a button that visually represents a specific metric or measurement. It provides a concise and interactive way for users to access important information or track key performance indicators.

<Example is="custom" />

<ReferenceLinks is="custom" />

## Installation

To install `@igloo-ui/metric` in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```bash
npm install @igloo-ui/metric
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```bash
yarn add @igloo-ui/metric
```

## Usage

Then to use the component in your code just import it!

```jsx
import Metric from '@igloo-ui/metric';
import Wellness from '@igloo-ui/icons/dist/Wellness';

const [selected, setSelected] = React.useState(false);
const handleOnPress = () => {
  setSelected(!selected);
};

<Metric
  value={20}
  variation={3}
  label="Metric Name"
  icon={<Wellness size="medium" />}
  onPress={handleOnPress}
  appearance={selected ? 'selected' : 'positive'}
/>;
```
npm package: @igloo-ui/modal
Description: The Modal is an interface component positioned over the page content to emphasize new elements. It blocks standard navigation and requires interaction from the user to be dismissed.
Author: Officevibe Inc.
Latest version: 3.0.0

# Modal

The Modal is an interface component positioned over the page content to emphasize new elements. It blocks standard navigation and requires interaction from the user to be dismissed.

<Example is="custom" />

<ReferenceLinks is="custom" />

## Installation

To install `@igloo-ui/modal` in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```bash
npm install @igloo-ui/modal
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```bash
yarn add @igloo-ui/modal
```

## Usage

Then to use the component in your code just import it!

```jsx
import Modal from '@igloo-ui/modal';
import Button from '@igloo-ui/button';

const [show, setShow] = useState(false);

<Button appearance="secondary" onClick={() => setShow(true)}>
  open modal
</Button>;

<Modal
  title={`Modal title`}
  isDismissable
  isClosable
  isOpen={show}
  closeBtnAriaLabel={`Close`}
  onClose={() => setShow(false)}
>
  Modal content
</Modal>;
```

## Troubleshooting

**When a Dialog opens above a Modal**

In this case, when you close the Dialog, the Modal closes automatically. Here is a workaround to remedy this.

To solve the problem, set the `isDismissable` property of the Modal to `false` when the Dialog component is up and then return to `true` when it closes.
npm package: @igloo-ui/option-button
Description: The option button is a component that will often be used in a group of multiple option buttons and will play a role similar to the radio buttons.
Author: Officevibe Inc.
Latest version: 0.5.0

# OptionButton

The option button is a component that will often be used in a group of multiple option buttons and will play a role similar to the radio buttons.

<Example is="custom" />

<ReferenceLinks is="custom" />

## Installation

To install `@igloo-ui/option-button` in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```bash
npm install @igloo-ui/option-button
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```bash
yarn add @igloo-ui/option-button
```

## Usage

Then to use the component in your code just import it!

```jsx
import OptionButton from '@igloo-ui/option-button';

<OptionButton htmlFor="textBtn" name="buttonType" buttonType="text">
  Text
</OptionButton>;
```
npm package: @igloo-ui/pager
Description: Pagers allow users to navigate through items of the same table or list.
Author: Officevibe Inc.
Latest version: 3.0.0

# Pager

Pagers allow users to navigate through items of the same table or list.

<Example is="custom" />
<ReferenceLinks is="custom" />

## Installation

To install `@igloo-ui/pager` in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```bash
npm install @igloo-ui/pager
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```bash
yarn add @igloo-ui/pager
```

## Usage

Then to use the component in your code, import it!

```jsx
import Pager from '@igloo-ui/pager';

const [currentPage, setCurrentPage] = React.useState(1);

  <Pager
    pageSize={5}
    totalCount={200}
    currentPage={currentPage}
    onPageChange={(page) => setCurrentPage(page)}
  />
```


## Internationalization

The Pager component uses the [`@igloo-ui/provider`](https://igloo.officevibe.design/component/Provider) package to receive the correct locale. This should be wrapped around the entire application.

```jsx
import IglooProvider from '@igloo-ui/provider';

<IglooProvider locale="fr-CA">
  <Pager
    pageSize={5}
    totalCount={200}
    currentPage={currentPage}
    onPageChange={(page) => setCurrentPage(page)}
  />
</IglooProvider>
```
npm package: @igloo-ui/pie-chart
Description: A pie chart is a circular graph used to display proportions or percentages. It includes a label and percentage in the middle, representing the category or component being depicted and its proportion of the whole.
Author: Officevibe Inc.
Latest version: 0.5.0

# PieChart

A pie chart is a circular graph used to display proportions or percentages. It includes a label and percentage in the middle, representing the category or component being depicted and its proportion of the whole.

<Example is="custom" />

<ReferenceLinks is="custom" />

## Installation

To install `@igloo-ui/pie-chart` in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```bash
npm install @igloo-ui/pie-chart
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```bash
yarn add @igloo-ui/pie-chart
```

## Usage

Then to use the component in your code just import it!

```jsx
import PieChart from '@igloo-ui/pie-chart';
import tokens from '@igloo-ui/tokens/dist/base10/tokens.json';

const mockData = [
  { id: 'positive', percentage: 25, color: tokens.seaweed400 },
  { id: 'negative', percentage: 10, color: tokens.coral400 },
  { id: 'skipped', percentage: 40, color: tokens.creamsicle100 },
  { id: 'unanswered', percentage: 25, color: tokens.grey300 },
];

<PieChart data={mockData} label="Poll Completion" size="large" rate={35} />;
```
npm package: @igloo-ui/popover
Description: Popovers are small overlays that open on demand. They let users access additional content and actions without cluttering the page.
Author: Officevibe Inc.
Latest version: 1.0.0

# Popover

Popovers are small overlays that open on demand. They let users access additional content and actions without cluttering the page.

  <Example is="custom" />

  <ReferenceLinks is="custom" />

## Installation

To install `@igloo-ui/popover` in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```bash
npm install @igloo-ui/popover
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```bash
yarn add @igloo-ui/popover
```

## Usage

Then to use the component in your code just import it!

```jsx
import Popover from '@igloo-ui/popover';
import Hyperlink from '@igloo-ui/hyperlink';

<Popover
  title="Date"
  content="Popover copy"
  action={
    <Hyperlink>
      <a href="#">Tell me more</a>
    </Hyperlink>
  }
>
  Trigger content
</Popover>;
```
npm package: @igloo-ui/progress-bar
Description: Progress bar that displays linear progress. Works best with elements that do not involve specific steps.
Author: Officevibe Inc.
Latest version: 2.1.0

# ProgressBar

Progress bar that displays linear progress. Works best with elements that do not involve specific steps.

<Example is="custom" />

<ReferenceLinks is="custom" />

## Installation

To install `@igloo-ui/progress-bar` in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```bash
npm install @igloo-ui/progress-bar
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```bash
yarn add @igloo-ui/progress-bar
```

## Usage

Then to use the component in your code just import it!

```jsx
import ProgressBar from '@igloo-ui/progress-bar';

<ProgressBar value={0.7} ariaLabel="Progress: 70% of objectives achieved" />;
```
npm package: @igloo-ui/provider
Description: Provider allows you to set the locale for all Igloo components that need it. This should be done by wrapping the entire application in the provider. There are also hooks available such as useLocale and useLocalizedStringFormatter.
Author: Officevibe Inc.
Latest version: 0.2.0

# Provider

Provider allows you to set the locale for all Igloo components that need it. This should be done by wrapping the entire application in the provider. There are also hooks available such as useLocale and useLocalizedStringFormatter.

<ReferenceLinks is="custom" />

## Installation

To install `@igloo-ui/provider` in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```bash
npm install @igloo-ui/provider
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```bash
yarn add @igloo-ui/provider
```

## Usage

Then to use the component in your code just import it!

```jsx
import IglooProvider from '@igloo-ui/provider';

<IglooProvider locale="en-US">
    const { locale } = useLocale();

    <div>Here is the current locale: {locale}</div>;
</IglooProvider>
```
npm package: @igloo-ui/radio
Description: Use Radio components to be part of an options list where users can only make a single choice.
Author: Officevibe Inc.
Latest version: 0.5.0

# Radio

Use Radio components to be part of an options list where users can only make a single choice.

<Example is="custom" />

<ReferenceLinks is="custom" />

## Installation

To install `@igloo-ui/radio` in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```bash
npm install @igloo-ui/radio
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```bash
yarn add @igloo-ui/radio
```

Then to use the component in your code just import it!

```js
import Radio from '@igloo-ui/radio';

<Radio htmlFor="radio-id">Label</Radio>;
```
npm package: @igloo-ui/select
Description: Select inputs let users choose one option from an options menu.
Author: Officevibe Inc.
Latest version: 2.1.0

# Select

Select inputs let users choose one option from an options menu.

<Example is="custom" />

<ReferenceLinks is="custom" />

## Installation

To install `@igloo-ui/select` in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```bash
npm install @igloo-ui/select
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```bash
yarn add @igloo-ui/select
```

## Usage

Then to use the component in your code just import it!

```jsx
import Select from '@igloo-ui/select';

<Select
  options={[
    { label: 'Option 1', value: '1' },
    { label: 'Option 2', value: '2' },
  ]}
>
  Place holder
</Select>;
```
npm package: @igloo-ui/stacked-bar
Description: A stacked bar is a representation of data that uses rectangular bars to show the relative proportions of different categories.
Author: Officevibe Inc.
Latest version: 0.7.0

# StackedBar

A stacked bar is a representation of data that uses rectangular bars to show the relative proportions of different categories.

<Example is="custom" />

<ReferenceLinks is="custom" />

## Installation

To install `@igloo-ui/stacked-bar` in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```bash
npm install @igloo-ui/stacked-bar
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```bash
yarn add @igloo-ui/stacked-bar
```

## Usage

Then to use the component in your code just import it!

```jsx
import StackedBar from '@igloo-ui/stacked-bar';

<StackedBar
  dataSet={[
    {
      key: 'stronglyUnfavorable',
      label: 'Strongly Unfavorable',
      value: 30,
      strength: -2,
    },
    {
      key: 'unfavorable',
      label: 'Unfavorable',
      value: 10,
      strength: -1,
    },
    {
      key: 'neutral',
      label: 'Neutral',
      value: 20,
      strength: 0,
    },
    {
      key: 'favorable',
      label: 'Favorable',
      value: 15,
      strength: 1,
    },
    {
      key: 'stronglyFavorable',
      label: 'Strongly Favorable',
      value: 25,
      strength: 2,
    },
  ]}
  showValue
/>;
```
npm package: @igloo-ui/stepper
Description: The Stepper component provides a visual representation of a multi-step process.
Author: Officevibe Inc.
Latest version: 0.7.0

# Stepper

The Stepper component provides a visual representation of a multi-step process.

<Example is="custom" />

<ReferenceLinks is="custom" />

## Installation

To install `@igloo-ui/stepper` in your project, you will need to run the following command using [npm](https://www.npmjs.com/):

```bash
npm install @igloo-ui/stepper
```

If you prefer [Yarn](https://classic.yarnpkg.com/en/), use the following command instead:

```bash
yarn add @igloo-ui/stepper
```

## Usage

Then to use the component in your code just import it!

```jsx
import Button from '@igloo-ui/button';
import Stepper from '@igloo-ui/stepper';

const [currentStep, setCurrentStep] = React.useState(0);
const exampleSteps = [
  { title: 'Step 1', onClick: (index) => setCurrentStep(index) },
  { title: 'Step 2', onClick: (index) => setCurrentStep(index) },
  { title: 'Step 3', onClick: (index) => setCurrentStep(index) },
];

<Stepper
  currentStep={currentStep}
  style={{ flex: '1 1 auto' }}
  steps={exampleSteps}
/>
<Button
  onClick={() => setCurrentStep((prevCurrentStep) => prevCurrentStep + 1)}
  disabled={currentStep === exampleSteps.length - 1}
>
  Continue
</Button>;
```