open-index/open-npm huggingface dataset:
npm package: @leafygreen-ui/a11y
Description: leafyGreen UI Kit A11y
Latest version: 3.0.5

# A11y

![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/a11y.svg)

## Installation

### PNPM

```shell
pnpm add @leafygreen-ui/a11y
```

### Yarn

```shell
yarn add @leafygreen-ui/a11y
```

### NPM

```shell
npm install @leafygreen-ui/a11y
```

## Example

```js
import { VisuallyHidden } from '@leafygreen-ui/a11y';

const Button = () => {
  return (
    <button>
      <svg role="presentation" aria-hidden />
      <VisuallyHidden>Click me</VisuallyHidden>
    </button>
  );
};
```

## VisuallyHidden

### Properties

| Prop       | Type     | Description                                                             | Default |
| ---------- | -------- | ----------------------------------------------------------------------- | ------- |
| `children` | `string` | Text that is announced to screen readers but is hidden from the screen. |         |

## useAccessibleFormField

Hook that returns two sets of props that accessibly associate a label and its respective input element

### Properties

| Parameter | Type     | Description                          | Default |
| --------- | -------- | ------------------------------------ | ------- |
| `id`      | `string` | id that describes the input element. |         |

## validateAriaLabelProps

Function that validates that either aria-label or aria-labelledby are present within props.

### Properties

| Parameter       | Type                  | Description                                   | Default |
| --------------- | --------------------- | --------------------------------------------- | ------- |
| `props`         | `Record<string, any>` | Object of component properties.               |         |
| `componentName` | `string`              | Name of component with props to be validated. |         |

## prefersReducedMotion

Returns an emotion CSS instance for rendering styles that respect
OS-level preferences for reduced motion.

Use this function to remove scale, size, and positional transitions
for users with that preference set.

### Properties

| Parameter | Type     | Description                                               | Default |
| --------- | -------- | --------------------------------------------------------- | ------- |
| `styles`  | `string` | String of styles to render within preference media query. |         |
npm package: @leafygreen-ui/badge
Description: leafyGreen UI Kit Badge
Latest version: 10.2.4

# Badge

![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/badge.svg)

#### [View on MongoDB.design](https://www.mongodb.design/component/badge/live-example/)

## Installation

### PNPM

```shell
pnpm add @leafygreen-ui/badge
```

### Yarn

```shell
yarn add @leafygreen-ui/badge
```

### NPM

```shell
npm install @leafygreen-ui/badge
```

## Example

```js
import Badge from '@leafygreen-ui/badge';

<Badge variant="blue" className="my-badge">
  New
</Badge>;
```

## Properties

| Prop        | Type                                                                              | Description                                                       | Default       |
| ----------- | --------------------------------------------------------------------------------- | ----------------------------------------------------------------- | ------------- |
| `variant`   | `'lightgray'`, `'darkgray'`, `'red'`, `'blue'`, `'green'`, `'yellow'`, `'purple'` | Sets the style variant of the badge.                              | `'lightgray'` |
| `className` | `string`                                                                          | Adds a className to the class attribute                           |               |
| `children`  | `node`                                                                            | The content that will appear inside of the `<Badge />` component. |               |
| ...         | native `div` attributes                                                           | Any other props will be spread on the root `div` element          |               |
| `darkMode`  | `boolean`                                                                         | Determines if the component renders in dark theme                 | `false`       |
npm package: @leafygreen-ui/banner
Description: leafyGreen UI Kit Banner
Latest version: 10.2.5

# Banner

![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/banner.svg)

#### [View on MongoDB.design](https://www.mongodb.design/component/banner/live-example/)

## Installation

### PNPM

```shell
pnpm add @leafygreen-ui/banner
```

### Yarn

```shell
yarn add @leafygreen-ui/banner
```

### NPM

```shell
npm install @leafygreen-ui/banner
```

## Example

```js
<Banner>This is the banner content</Banner>
```

## Properties

| Prop           | Type                                           | Description                                                           | Default    |
| -------------- | ---------------------------------------------- | --------------------------------------------------------------------- | ---------- |
| `variant`      | `'info'`, `'warning'`, `'danger'`, `'success'` | Sets the variant for the Banner                                       | `'info'`   |
| `dismissible`  | `boolean`                                      | Determines whether or not the Banner is dismissible                   | `false`    |
| `onClose`      | `React.MouseEventHandler`                      | Callback fired when dismiss button is clicked                         | `() => {}` |
| `image`        | `React.ReactElement`                           | Illustration that will replace default Icon when the prop is supplied |            |
| `baseFontSize` | `13`, `16`                                     | Determines `font-size` for body copy in Callout component             | `13`       |
| `darkMode`     | `boolean`                                      | Determines if the component renders in dark theme                     | `false`    |
| ...            | native `div` attributes                        | Any other props will be spread on the root `div` element              |            |
npm package: @leafygreen-ui/box
Description: leafyGreen UI Kit Box
Latest version: 5.0.2
Deprecated: This package is deprecated. Please use @leafygreen-ui/polymorphic instead.

# Box

![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/box.svg)

#### [View on MongoDB.design](https://www.mongodb.design/component/box/live-example/)

## Overview

`Box` is a polymorphic component that renders a given component depending on the provided props.
For example, providing the `href` prop can indicate `Box` should be rendered as an anchor tag.
Providing the `as` prop indicates that `Box` should be rendered as the component referenced by `as`.
By default, `Box` will render as the HTML element `div`.

This can be useful for simplifying components that are repetitively used, but need different behaviors.

## Installation

### PNPM

```shell
pnpm add @leafygreen-ui/box
```

### Yarn

```shell
yarn add @leafygreen-ui/box
```

### NPM

```shell
npm install @leafygreen-ui/box
```

## Example

```tsx
import Box from '@leafygreen-ui/box';

<Box href="https://mongodb.design">I shall render as a link</Box>;
```

## Properties

| Prop       | Type                                             | Description                                                                                                                         | Default |
| ---------- | ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------- | ------- |
| `as`       | `React.ElementType`                              | The component or HTML tag to be rendered by the `<Box />` component. **Note**: This will supersede the behavior of any other props. | `div`   |
| `href`     | `string`                                         | When provided, `<Box />` will render an anchor tag with this `href` value.                                                          |         |
| `children` | `React.ReactElement`                             | Content to be rendered in an HTML element, or provided as a prop to the rendered component                                          |         |
| ...        | native attributes of component passed to as prop | Any other properties will be spread on the rendered HTML element or component.                                                      |         |
npm package: @leafygreen-ui/brand-shape
Description: leafyGreen UI Kit Brand Shape (a.k.a. Blob)
Latest version: 1.0.0-beta.3

# Blob

![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/blob.svg)

#### [View on MongoDB.design](https://www.mongodb.design/component/blob/example/)

## Installation

### Yarn

```shell
yarn add @leafygreen-ui/blob
```

### NPM

```shell
npm install @leafygreen-ui/blob
```

## Example

**Output HTML**

## Properties

| Prop | Type | Description | Default |
| ---- | ---- | ----------- | ------- |
npm package: @leafygreen-ui/callout
Description: leafyGreen UI Kit Callout
Latest version: 12.1.5

# Callout

![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/callout.svg)

#### [View on MongoDB.design](https://www.mongodb.design/component/callout/live-example/)

## Installation

### PNPM

```shell
pnpm add @leafygreen-ui/callout
```

### Yarn

```shell
yarn add @leafygreen-ui/callout
```

### NPM

```shell
npm install @leafygreen-ui/callout
```

## Example

```js
<Callout variant={Variant.Note} title="Title">
  Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  Lorem Ipsum has been the industrys standard dummy text ever since the 1500s,
  when an unknown printer took a galley of type and scrambled it to make a type
  specimen book.
</Callout>
```

## Properties

| Prop           | Type                                                       | Description                                               | Default |
| -------------- | ---------------------------------------------------------- | --------------------------------------------------------- | ------- |
| `variant`      | `'note'`, `'tip'`, `'important'`, `'warning'`, `'example'` | Sets the variant for the Callout                          |         |
| `children`     | `node`                                                     | The contents to display within the Callout                |         |
| `title`        | `string`                                                   | Optional title text to display above Callout text         |         |
| `className`    | `string`                                                   | Adds a className to the outermost element                 |         |
| `baseFontSize` | `13`, `16`                                                 | Determines `font-size` for body copy in Callout component | `13`    |
| `darkMode`     | `boolean`                                                  | Determines if the component renders in dark theme         | `false` |
npm package: @leafygreen-ui/canvas-header
Description: LeafyGreen UI Kit Canvas Header
Latest version: 3.0.3

# Canvas Header

![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/canvas-header.svg)

#### [View on MongoDB.design](https://www.mongodb.design/component/canvas-header/example/)

## Installation

### Yarn

```shell
yarn add @leafygreen-ui/canvas-header
```

### NPM

```shell
npm install @leafygreen-ui/canvas-header
```

## Example

```js
import { CanvasHeader } from `@leafygreen-ui/canvas-header`;
import Button from '@leafygreen-ui/button';
import Icon from '@leafygreen-ui/icon';
import { BackLink } from '@leafygreen-ui/typography';


  <CanvasHeader
    pageTitle="page title"
    resourceName='ac_iqttxwn_shard-00-01.hvcuthh.mongodbnet:27017_324892384903284902384903284903284902384903284832908_long_name'
    resourceIcon={<Icon glyph={'ShardedCluster'} />}
    backLink={
      <BackLink
        href="/home"
      >
        Back to Cluster
      </BackLink>
    }
    actions={
      <Button
        variant="primary"
        leftGlyph={<Icon glyph={'InviteUser'} />}
      >
        Invite user
      </Button>
    }
    badges={
      <>
        <Badge variant="green">Enabled</Badge>
        <Badge variant="blue">In Dev Mode</Badge>
      </>
    }
  />
```

## Properties

| Prop           | Type              | Description                                                                   | Default |
| -------------- | ----------------- | ----------------------------------------------------------------------------- | ------- |
| `darkMode`     | `boolean`         | Determines if the component renders in dark mode                              | `false` |
| `pageTitle`    | `React.ReactNode` | Required page title                                                           |         |
| `resourceName` | `string`          | Optional resource name that will copy to the clipboard when clicked           |         |
| `resourceIcon` | `React.ReactNode` | Optional icon that will render to the left of the resource name               |         |
| `badges`       | `React.ReactNode` | Optional badges that will render to the right of the resource name            |         |
| `actions`      | `React.ReactNode` | Optional buttons that will render to the right of the badges or resource name |         |
| `backLink`     | `React.ReactNode` | Optional link that will render above the page title.                          |         |
npm package: @leafygreen-ui/card
Description: leafyGreen UI Kit Card
Latest version: 13.3.1

# Card

![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/card.svg)

#### [View on MongoDB.design](https://www.mongodb.design/component/card/live-example/)

## Installation

### PNPM

```shell
pnpm add @leafygreen-ui/card
```

### Yarn

```shell
yarn add @leafygreen-ui/card
```

### NPM

```shell
npm install @leafygreen-ui/card
```

## Example

```tsx
import Card from '@leafygreen-ui/card';

<Card className="card-styles" as="article">
  This is my card component
</Card>;
```

## Properties

Card is a styled wrapper for the Box component. Any properties you would pass to Box can also be passed to Card.

| Prop        | Type              | Description                                                       | Default |
| ----------- | ----------------- | ----------------------------------------------------------------- | ------- |
| `children`  | `React.ReactNode` | Content rendered inside of the `<Card />` component               |         |
| `className` | `string`          | Adds a className to the class attribute                           |         |
| `darkMode`  | `boolean`         | Determines whether or not the component will appear in dark mode. | `false` |

_Any other properties will be spread on the Box element._

## Usage and Interactivity

This component is designed to be a container for other elements and content. We discourage `onClick` or `href` directly to the Card component. Instead, we recommend adding interactive elements inside the component.

### DO ✅

```tsx
<Card>
  <Button onClick={handleOnClick} />
</Card>
```

### DON'T 🚫

```tsx
<Card onClick={handleOnClick}>This is my card component</Card>
```
npm package: @leafygreen-ui/collection-toolbar
Description: LeafyGreen UI Kit Collection Toolbar
Latest version: 1.0.0

# Collection Toolbar

![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/collection-toolbar.svg)

#### [View on MongoDB.design](https://www.mongodb.design/component/collection-toolbar/live-example/)

## Installation

### PNPM

```shell
pnpm add @leafygreen-ui/collection-toolbar
```

### Yarn

```shell
yarn add @leafygreen-ui/collection-toolbar
```

### NPM

```shell
npm install @leafygreen-ui/collection-toolbar
```
npm package: @leafygreen-ui/copyable
Description: leafyGreen UI Kit Copyable
Latest version: 12.0.3

# Copyable

![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/copyable.svg)

#### [View on MongoDB.design](https://www.mongodb.design/component/copyable/live-example/)

## Installation

### PNPM

```shell
pnpm add @leafygreen-ui/copyable
```

### Yarn

```shell
yarn add @leafygreen-ui/copyable
```

### NPM

```shell
npm install @leafygreen-ui/copyable
```

## Example

```js
<Copyable label="Label" description="Description">
  {'npm install @leafygreen-ui/copyable'}
</Copyable>
```

## Properties

| Prop          | Type                   | Description                                                       | Default     |
| ------------- | ---------------------- | ----------------------------------------------------------------- | ----------- |
| `label`       | `string`               | Label text for the copyable contents.                             |             |
| `description` | `string`               | Further text to describe the contents.                            | `undefined` |
| `className`   | `string`               | className applied to the container of the code element            |             |
| `children`    | `string`               | The text that will be copied.                                     |             |
| `darkMode`    | `boolean`              | Determines whether or not the component appears in dark mode.     | `false`     |
| `size`        | `'default'`, `'large'` | The display size of the label, description, and copyable children | `'default'` |
| `copyable`    | `boolean`              | Whether or not a copy button should be shown.                     | `true`      |
npm package: @leafygreen-ui/date-utils
Description: LeafyGreen UI Kit Date Utils
Latest version: 0.3.5

# Date Utils

![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/date-utils.svg)

LeafyGreen DateUtils provides date manipulation & comparison utilities not included in the [`date-fns`](https://date-fns.org/) library.

Note, this package only contains generic Date utilities. For implementation-specific utilities, see `date-picker/src/shared/utils`

## Installation

### PNPM

```shell
pnpm add @leafygreen-ui/date-utils
```

### Yarn

```shell
yarn add @leafygreen-ui/date-utils
```

### NPM

```shell
npm install @leafygreen-ui/date-utils
```
npm package: @leafygreen-ui/delete-wizard
Description: LeafyGreen UI Kit Delete Wizard
Latest version: 0.1.0

# Delete Wizard

![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/delete-wizard.svg)

#### [View on MongoDB.design](https://www.mongodb.design/component/delete-wizard/live-example/)

## Installation

### PNPM

```shell
pnpm add @leafygreen-ui/delete-wizard
```

### Yarn

```shell
yarn add @leafygreen-ui/delete-wizard
```

### NPM

```shell
npm install @leafygreen-ui/delete-wizard
```

```tsx
<DeleteWizard>
  <DeleteWizard.Header
    pageTitle="Demo Delete Wizard"
  />
  <DeleteWizard.Step requiresAcknowledgement>
    <DeleteWizard.StepContent>
      <div>Step 1 contents<div>
    </DeleteWizard.StepContent>
    <DeleteWizard.Footer
      primaryButtonProps={{
        children: 'Continue to next step',
      }}
    />
  </DeleteWizard.Step>

  <DeleteWizard.Step requiresAcknowledgement>
    <DeleteWizard.StepContent>
      <div>Step 2 contents</div>
    </DeleteWizard.StepContent>
    <DeleteWizard.Footer
      primaryButtonProps={{
        leftGlyph: <TrashIcon />,
        variant: 'danger',
        children: 'Delete my thing',
        onClick: handleDelete,
      }}
    />
  </DeleteWizard.Step>
</DeleteWizard>
```

### DeleteWizard

Establishes a context, and only renders the `activeStep` (managed internally, or provided with the `activeStep` prop). Accepts a `DeleteWizard.Header` and any number of `DeleteWizard.Step`s as children.

`DeleteWizard` and all sub-components include template styling.

### DeleteWizard.Header

A convenience wrapper around `CanvasHeader`

### DeleteWizard.Step

A convenience wrapper around `Wizard.Step` to ensure the correct context.
Like the basic `Wizard.Step`, if `requiresAcknowledgement` is true, the step must have `isAcknowledged` set in context, (or passed in as a controlled prop) for the Footer's primary button to be enabled. (see the Wizard and DeleteWizard demos in Storybook)

### DeleteWizard.Footer

A wrapper around Wizard.Footer with embedded styles for the DeleteWizard template
npm package: @leafygreen-ui/expandable-card
Description: leafyGreen UI Kit Expandable Card
Latest version: 5.2.4

# Expandable Card

![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/expandable-card.svg)

#### [View on MongoDB.design](https://www.mongodb.design/component/expandable-card/live-example/)

## Installation

### PNPM

```shell
pnpm add @leafygreen-ui/expandable-card
```

### Yarn

```shell
yarn add @leafygreen-ui/expandable-card
```

### NPM

```shell
npm install @leafygreen-ui/expandable-card
```

## Example

```js
import ExpandableCard from '@leafygreen-ui/expandable-card';

<ExpandableCard
  title="Lorem Ipsum"
  description="Donec id elit non mi porta gravida at eget metus"
  flagText="optional"
  darkMode={false}
>
  Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut
  fermentum massa justo sit amet risus.
</ExpandableCard>;
```

## Properties

| Prop             | Type                                    | Description                                                                             | Default     |
| ---------------- | --------------------------------------- | --------------------------------------------------------------------------------------- | ----------- |
| title            | `React.ReactNode`                       | The title of the card (Required)                                                        |             |
| description      | `string`                                | Description text below the title                                                        |             |
| flagText         | `string`                                | Text in parentheses immediately following the title. Typically 'optional' or 'required' |             |
| darkMode         | `boolean`                               | Toggles dark mode                                                                       | `false`     |
| defaultOpen      | `boolean`                               | Defines the default state of the card                                                   | `false`     |
| isOpen           | `boolean`                               | Forces the card state                                                                   | `undefined` |
| onClick          | `(event: React.SyntheticEvent) => void` | Callback fired when a user clicks the card header                                       |             |
| id               | `string`                                | Unique id for the card                                                                  |             |
| className        | `string`                                | Styling prop                                                                            |             |
| contentClassName | `string`                                | Styling prop for children                                                               |             |
npm package: @leafygreen-ui/form-field
Description: LeafyGreen UI Kit Form Field
Latest version: 4.0.9

# Form Field

![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/form-field.svg)

#### [View on MongoDB.design](https://www.mongodb.design/component/form-field/live-example/)

## Installation

### PNPM

```shell
pnpm add @leafygreen-ui/form-field
```

### Yarn

```shell
yarn add @leafygreen-ui/form-field
```

### NPM

```shell
npm install @leafygreen-ui/form-field
```
npm package: @leafygreen-ui/inline-definition
Description: leafyGreen UI Kit Inline Definition
Latest version: 9.2.1

# Inline Definition

![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/inline-definition.svg)

#### [View on MongoDB.design](https://www.mongodb.design/component/inline-definition/live-example/)

## Installation

### PNPM

```shell
pnpm add @leafygreen-ui/inline-definition
```

### Yarn

```shell
yarn add @leafygreen-ui/inline-definition
```

### NPM

```shell
npm install @leafygreen-ui/inline-definition
```

## Example

```js
<H2>
  <InlineDefinition definition={shardDefinition}>Shard</InlineDefinition> your
  cluster
</H2>
```

## Properties

| Prop                    | Type                                     | Description                                                                                                                                | Default   |
| ----------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | --------- |
| `definition` (Required) | `React.ReactNode`                        | Content that describes the term. Will appear inside Tooltip.                                                                               |           |
| `children`              | `string`                                 | Text that will appear underlined                                                                                                           |           |
| `className`             | `string`                                 | className will be applied to the trigger element                                                                                           |           |
| `align`                 | `'top'`, `'bottom'`, `'left'`, `'right'` | Determines the preferred alignment of the tooltip relative to the component's children.                                                    | `'top'`   |
| `justify`               | `'start'`, `'middle'`, `'end'`           | Determines the preferred justification of the tooltip (based on the alignment) relative to the element passed to the component's children. | `'start'` |
| `darkMode`              | `boolean`                                | Determines if the component will appear in dark mode.                                                                                      | `false`   |
| `tooltipClassName`      | `string`                                 | className to be applied to the tooltip element                                                                                             |           |
npm package: @leafygreen-ui/loading-indicator
Description: leafyGreen UI Kit Loading Indicator
Latest version: 5.1.1

# Loading Indicator

![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/loading-indicator.svg)

#### [View on MongoDB.design](https://www.mongodb.design/component/loading-indicator/live-example/)

## Installation

### PNPM

```shell
pnpm add @leafygreen-ui/loading-indicator
```

### Yarn

```shell
yarn add @leafygreen-ui/loading-indicator
```

### NPM

```shell
npm install @leafygreen-ui/loading-indicator
```

## Spinner

```
<Spinner
  variant="large"
  description=”Loading…”
/>
```

| Prop   | Type               | Description                        | Default   |
| ------ | ------------------ | ---------------------------------- | --------- |
| `size` | `Size` or `number` | Determines the size of the spinner | `default` |

## BlobLoader

```
<BlobLoader
  description=”Loading…”
/>
```

| Prop          | Type     | Description      | Default |
| ------------- | -------- | ---------------- | ------- |
| `description` | `string` | Description text | `-`     |
npm package: @leafygreen-ui/ordered-list
Description: LeafyGreen UI Kit Ordered List
Latest version: 3.0.11

# Ordered List

![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/ordered-list.svg)

#### [View on MongoDB.design](https://www.mongodb.design/component/ordered-list/live-example/)

## Installation

### PNPM

```shell
pnpm add @leafygreen-ui/ordered-list
```

### Yarn

```shell
yarn add @leafygreen-ui/ordered-list
```

### NPM

```shell
npm install @leafygreen-ui/ordered-list
```

## Example

```js
<OrderedList>
  <OrderedListItem
    title="Title"
    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna."
  />
  <OrderedListItem
    title="Title"
    description={
      <>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna. <Link>Learn more.</Link>
      </>
    }
  />
  <OrderedListItem
    title="Title"
    description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna."
  />
</OrderedList>
```

# OrderedList

| Prop       | Type      | Description                                      | Default |
| ---------- | --------- | ------------------------------------------------ | ------- |
| `darkMode` | `boolean` | Determines if the component renders in dark mode | `false` |

# OrderedListItem

| Prop        | Type              | Description                                                         | Default |
| ----------- | ----------------- | ------------------------------------------------------------------- | ------- |
| title       | `React.ReactNode` | The title of the list item.                                         |         |
| description | `React.ReactNode` | The description of the list item. This will render below the title. |         |
npm package: @leafygreen-ui/pagination
Description: leafyGreen UI Kit Pagination
Latest version: 4.3.1

# Pagination

![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/pagination.svg)

#### [View on MongoDB.design](https://www.mongodb.design/component/pagination/live-example/)

## Installation

### PNPM

```shell
pnpm add @leafygreen-ui/pagination
```

### Yarn

```shell
yarn add @leafygreen-ui/pagination
```

### NPM

```shell
npm install @leafygreen-ui/pagination
```

## Example

**Output HTML**

## Properties

| Prop                       | Type                                 | Description                                                                                          | Default    |
| -------------------------- | ------------------------------------ | ---------------------------------------------------------------------------------------------------- | ---------- |
| itemsPerPage               | number                               | Number of items visible on the current page.                                                         | 10         |
| itemsPerPageOptions        | number[]                             | Options to be shown in the Select to indicate items per page.                                        | [10,25,50] |
| onItemsPerPageOptionChange | SelectProps['onChange']              | onChange prop passed to the Select component that controls the items per page.                       |            |
| currentPage                | number                               | Current index of page shown (starting from 1)                                                        | 1          |
| onCurrentPageOptionChange  | SelectProps['onChange']              | onChange prop passed to the Select component that controls the current page index.                   |            |
| numTotalItems              | number                               | Total number of records.                                                                             |            |
| onBackArrowClick           | AccessibleIconButtonProps['onClick'] | Function called when the forward arrow icon is clicked                                               |            |
| disableBackArrowButton     | boolean                              | Disables the back arrow button. Back arrow button is only disabled on the first page by default      | false      |
| onForwardArrowClick        | AccessibleIconButtonProps['onClick'] | Function called when the forward arrow icon is clicked                                               |            |
| disableForwardArrowButton  | boolean                              | Disables the forward arrow button. Forward arrow button is only disabled on the last page by default | false      |
npm package: @leafygreen-ui/palette
Description: LeafyGreen UI Palettes
Latest version: 5.0.2

# Palette

![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/palette.svg)

#### [View on MongoDB.design](https://www.mongodb.design/component/palette/live-example/)

## Installation

### PNPM

```shell
pnpm add @leafygreen-ui/palette
```

### Yarn

```shell
yarn add @leafygreen-ui/palette
```

### NPM

```shell
npm install @leafygreen-ui/palette
```

This package contains the brand-supported MongoDB UI color palette.

## UI Palette

### Usage

```shell
npm install @leafygreen-ui/palette
```

```js
import { palette } from '@leafygreen-ui/palette';

/**
 * palette = {
 * 	 black,
 *   white,
 *   gray: {
 *     dark3,
 *     dark2,
 *     dark1,
 *     base,
 *     light1,
 *     light2,
 *     light3,
 *   },
 *   green: {
 *     dark3,
 *     dark2,
 *     dark1,
 *     base,
 *     light1,
 *     light2,
 *     light3,
 *   },
 *   blue: {
 *     dark3,
 *     dark2,
 *     dark1,
 *     base,
 *     light1,
 *     light2,
 *     light3,
 *   },
 *   yellow: {
 *     dark3,
 *     dark2,
 *     base,
 *     light2,
 *     light3,
 *   },
 *   red: {
 *     dark3,
 *     dark2,
 *     base,
 *     light1,
 *     light2,
 *     light3,
 *   },
 * }
 */

const example = () => (
  <span style={{ color: palette.gray.dark1 }}>Hello World</span>
);
```

```less
@import '<path to node_modules>/@leafygreen-ui/palette/dist/palette.less';

/* 
 * @palette__white: #ffffff;
 * @palette__black: #001E2B;
 * 
 * @palette__gray--dark-3: #21313C;
 * @palette__gray--dark-2: #3D4F58;
 * @palette__gray--dark-1: #5C6C75;
 * @palette__gray--base: #889397;
 * @palette__gray--light-1: #C1C7C6;
 * @palette__gray--light-2: #E8EDEB;
 * @palette__gray--light-3: #F9FBFA;
 * 
 * @palette__green--dark-3: #023430;
 * @palette__green--dark-2: #00684A;
 * @palette__green--dark-1: #00A35C;
 * @palette__green--base: #00ED64;
 * @palette__green--light-1: #71F6BA;
 * @palette__green--light-2: #C0FAE6;
 * @palette__green--light-3: #E3FCF7;
 * 
 * @palette__purple--dark-3: #2D0B59;
 * @palette__purple--dark-2: #5E0C9E;
 * @palette__purple--base: #B45AF2;
 * @palette__purple--light-2: #F1D4FD;
 * @palette__purple--light-3: #F9EBFF;
 * 
 * @palette__blue--dark-3: #0C2657;
 * @palette__blue--dark-2: #083C90;
 * @palette__blue--dark-1: #1254B7;
 * @palette__blue--base: #016BF8;
 * @palette__blue--light-1: #0498EC;
 * @palette__blue--light-2: #C3E7FE;
 * @palette__blue--light-3: #E1F7FF;
 * 
 * @palette__yellow--dark-3: #4C2100;
 * @palette__yellow--dark-2: #944F01;
 * @palette__yellow--base: #FFC010;
 * @palette__yellow--light-2: #FFEC9E;
 * @palette__yellow--light-3: #FEF7DB;
 * 
 * @palette__red--dark-3: #5B0000;
 * @palette__red--dark-2: #970606;
 * @palette__red--base: #DB3030;
 * @palette__red--light-1: #EF5752;
 * @palette__red--light-2: #FFCDC7;
 * @palette__red--light-3: #FFEAE5;
*/
```
npm package: @leafygreen-ui/portal
Description: LeafyGreen UI Kit Portal
Latest version: 7.1.0

# Portal

![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/portal.svg)

#### [View on MongoDB.design](https://www.mongodb.design/component/portal/live-example/)

## Installation

### PNPM

```shell
pnpm add @leafygreen-ui/portal
```

### Yarn

```shell
yarn add @leafygreen-ui/portal
```

### NPM

```shell
npm install @leafygreen-ui/portal
```

## Example

```js
import Portal from '@leafygreen-ui/portal';

<Portal>
  <div>
    Portals transport their children to a div that is appended to the end of the
    document.body to or a node that can be specified with a container prop.
  </div>
</Portal>;
```

## Properties

| Prop        | Type       | Description                                                                                                                                                               | Default                         |
| ----------- | ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- |
| `container` | `DOM Node` | Sets the container node, which will contain all of the portaled content. If no container is supplied, a div will be created and apened to the end of the `document.body`. | `document.createElement('div')` |
| `children`  | `node`     | The children will be rendered inside of the portaled container.                                                                                                           |                                 |
npm package: @leafygreen-ui/ripple
Description: leafyGreen UI Kit Ripple
Latest version: 2.0.7

# Ripple

![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/ripple.svg)

## Installation

### PNPM

```shell
pnpm add @leafygreen-ui/ripple
```

### Yarn

```shell
yarn add @leafygreen-ui/ripple
```

### NPM

```shell
npm install @leafygreen-ui/ripple
```

## Example

```js
import { registerRipple } from '@leafygreen-ui/ripple';

// JavaScript Example
const button = document.querySelector('#my-button');
const buttonOptions = {
  variant: 'danger',
  darkMode: false,
};

registerRipple(button, buttonOptions);

// React Example
function Button({ options }) {
  const ref = React.useRef(null);

  useEffect(() => {
    if (ref.current) {
      registerRipple(ref, options);
    }
  }, [ref, options]);
}
```

## Arguments

| Argument         | Type                                                                | Description                                                   | Default |
| ---------------- | ------------------------------------------------------------------- | ------------------------------------------------------------- | ------- |
| ref              | `HTMLElement`                                                       | HTMLElement that ripple effect should be applied to           |         |
| options          |                                                                     | Options that specify coloring and size of ripple              |         |
| options.variant  | `'primary'`, `'info'`, `'default'`, `'danger'`, `'secondaryDanger'` | Determines color of ripple effect                             |         |
| options.darkMode | `boolean`                                                           | Determines if the ripple effect will be rendered in dark mode | `false` |

_NOTE: In order for this to work as expected, the target element must have the property `overflow:hidden` set_
npm package: @leafygreen-ui/stepper
Description: leafyGreen UI Kit Stepper
Latest version: 6.1.5

# Stepper

![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/stepper.svg)

#### [View on MongoDB.design](https://www.mongodb.design/component/stepper/live-example/)

## Installation

### PNPM

```shell
pnpm add @leafygreen-ui/stepper
```

### Yarn

```shell
yarn add @leafygreen-ui/stepper
```

### NPM

```shell
npm install @leafygreen-ui/stepper
```

## Example

```js
<Stepper currentStep={0} maxDisplayedSteps={2}>
  <div>Step 1</div>
  <div>Step 2</div>
</Stepper>
```

or

```js
<Stepper currentStep={0} maxDisplayedSteps={2}>
  <Step>Step 1</Step>
  <Step>Step 2</Step>
</Stepper>
```

## Properties

| Prop                  | Type              | Description                                                                                            | Default           |
| --------------------- | ----------------- | ------------------------------------------------------------------------------------------------------ | ----------------- |
| `children`            | `React.ReactNode` | ReactNode to display as the children of each step                                                      |                   |
| `currentStep`         | `number`          | Starting at 0, index of current step that should be highlighted.                                       |                   |
| `maxDisplayedSteps`   | `number`          | Maximum number of steps displayed a time. The rest are hidden.                                         | `children.length` |
| `completedStepsShown` | `number`          | Number of completed steps shown before the `currentStep`. The ellipses step is included in this count. | 1                 |
| `className`           | `string`          | className applied to the root element                                                                  |                   |
npm package: @leafygreen-ui/tokens
Description: leafyGreen UI Kit Tokens
Latest version: 4.2.2

# Tokens

![npm (scoped)](https://img.shields.io/npm/v/@leafygreen-ui/tokens.svg)

## Installation

### PNPM

```shell
pnpm add @leafygreen-ui/tokens
```

### Yarn

```shell
yarn add @leafygreen-ui/tokens
```

### NPM

```shell
npm install @leafygreen-ui/tokens
```

## Example

```js
import { spacing, fontFamilies, breakpoints, transitionDuration } from '@leafygreen-ui/tokens';

const spacingExample = () => <span style={{ margin: spacing[1] }}>Hello World</span>;
const fontFamiliesExample = () => <span style={{ font-family: fontFamilies.default }}>Hello World</span>;
const mq = facepaint(
  breakpoints.map(bp => `@media (min-width: ${bp}px)`),
  { literal: true },
);
const transitionDurationExample = <span style={{ transition: transitionDuration.default }}>Hello World</span>;
```