Gallery Indicator

!npm (scoped)

#### View on MongoDB.design

Installation

$3

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

$3

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

$3

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

Example

`js
import { GalleryIndicator } from @leafygreen-ui/gallery-indicator;

length={4}
activeIndex={0}
darkMode
/>

`

Properties

| Prop | Type | Description | Default |
| ------------- | --------- | ---------------------------------------------------- | ------- |
| length | number | The total number of dots to render | |
| activeIndex | number | The index of the active dot | |
| darkMode | boolean | Determines if the component will render in dark mode | false |

Test Harnesses

getTestUtils()

getTestUtils() is a util that allows consumers to reliably interact with LG GalleryIndicator in a product test suite. If the GalleryIndicator component cannot be found, an error will be thrown.

$3

`tsx
import { getTestUtils } from '@leafygreen-ui/gallery-indicator';

const utils = getTestUtils(lgId?: string); // lgId refers to the custom data-lgid attribute passed to GalleryIndicator. It defaults to 'lg-gallery_indicator' if left empty.
`

#### Single GalleryIndicator component

`tsx
import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { GalleryIndicator, getTestUtils } from '@leafygreen-ui/gallery-indicator';

...

test('Gallery Indicator', () => {
render(
length={4}
activeIndex={0}
darkMode
/>
);

const { getIndicatorlength, getActiveIndex } = getTestUtils();

expect(getIndicatorlength()).toBe(4);
expect(getActiveIndex()).toBe(0);
});
`

#### Multiple GalleryIndicator components

When testing multiple GalleryIndicator components, it is recommended to add the custom data-lgid attribute to each GalleryIndicator.

`tsx
import { render } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import { GalleryIndicator, getTestUtils } from '@leafygreen-ui/gallery-indicator';

...

test('GalleryIndicator', () => {
render(
<>
length={4}
activeIndex={0}
darkMode
data-lgid="gallery-indicator-abc"
/>
length={5}
activeIndex={1}
darkMode
data-lgid="gallery-indicator-xyz"
/>

);

const testUtils1 = getTestUtils('gallery-indicator-abc');
const testUtils2 = getTestUtils('gallery-indicator-xy');

// First GalleryIndicator
expect(testUtils1.getIndicatorlength()).toBe(4);
expect(testUtils1.getActiveIndex()).toBe(1);

// Second GalleryIndicator
expect(testUtils2.getIndicatorlength()).toBe(5);
expect(testUtils2.getActiveIndex()).toBe(0);
});
`

$3

`tsx
const { getIndicatorlength, getActiveIndex } = getTestUtils();
`

| Util | Description | Returns |
| ---------------------- | ------------------------------------- | -------- |
| getIndicatorlength() | Returns the number of indicators/dots | number |
| getActiveIndex() | Returns the active indicator index | number` |