@iress-oss/ids-components 6.0.0-alpha.3 → 6.0.0-alpha.30

package/.ai/components/row.md

@@ -0,0 +1,126 @@
+# Row
+
+Used in conjunction with the IressCol component to lay out page content.
+
+> **Component:** `import { IressRow } from '@iress-oss/ids-components'`
+> **Storybook:** [Row in Storybook](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-row--docs)
+
+## Quick Start
+
+```tsx
+import { IressRow } from '@iress-oss/ids-components';
+
+<IressRow gutter="spacing.7" horizontalAlign="left" verticalAlign="top" />
+```
+
+import {
+  ComponentExample,
+  ComponentOverview,
+} from '@iress-oss/ids-storybook-config';
+
+## Usage
+
+`IressRow` supports visual hierarchy by allowing you to add multiple columns in your layout, allowing the user to see more content on the screen at the same time.
+
+It works best alongside the `IressContainer` and `IressCol` components.
+
+### Gutter
+
+The spacing between columns is controlled by the `gutter` prop. To change the spacing between multiple columns once the row wraps, you can use the `rowGrap` prop.
+
+Note: The `gutter` prop only works with `IressCol` components. If you are using other components, please use the `IressInline` component instead.
+
+```tsx
+<IressStack maxWidth="container.xl" gap="xl">
+{SPACING_TOKENS.map((spacing, index) => {
+return (
+<IressText key={spacing}>
+{index> 0 && <IressDivider mb="xl" />}
+<h2>Gutter: {spacing}</h2>
+<IressRow gutter={spacing as never} />
+</IressText>
+);
+})}
+</IressStack>
+```
+
+[View "Gutter" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-row--gutter)
+
+### Responsive Gutter
+
+The `gutter` prop can take an object that takes five key/value pairs that correlate with the IDS breakpoints.
+
+```tsx
+<IressContainer>
+<IressStack gap="md">
+<IressPanel bg="alt">
+Current breakpoint: <CurrentBreakpoint />
+</IressPanel>
+<IressRow />
+</IressStack>
+</IressContainer>
+```
+
+[View "ResponsiveGutter" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-row--responsive-gutter)
+
+### Alignment
+
+### Horizontal alignment
+
+`IressRow` can be set to align horizontally using the `horizontalAlign` prop.
+
+```tsx
+<IressContainer>
+<IressStack gap="md">
+{HORIZONTAL_ALIGNS.map((horizontalAlign, index) => (
+<IressText key={horizontalAlign}>
+{index !== 0 && <IressDivider mb="md" />}
+<h2>Horizontal align: {horizontalAlign}</h2>
+<IressRow horizontalAlign={horizontalAlign}
+key={horizontalAlign}
+/>
+</IressText>
+))}
+</IressStack>
+</IressContainer>
+```
+
+[View "HorizontalAlignment" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-row--horizontal-alignment)
+
+### Vertical alignment
+
+`IressRow` can be set to align vertically using the `verticalAlign` prop.
+
+```tsx
+<IressContainer>
+<IressStack gap="md">
+{VERTICAL_ALIGNS.map((verticalAlign) => (
+<div key={verticalAlign}>
+<IressText element="h2">Vertical align: {verticalAlign}</IressText>
+<IressRow
+style={{
+height: '10rem',
+border: `1px solid ${cssVars.colour.neutral[30]}`,
+}} verticalAlign={verticalAlign}
+/>
+</div>
+))}
+</IressStack>
+</IressContainer>
+```
+
+[View "VerticalAlignment" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-row--vertical-alignment)
+
+## Props
+
+- **Type:** `IressRowProps`
+- **Type declarations:** `@iress-oss/ids-components/dist/components/Row/Row.d.ts`
+
+```typescript
+import type { IressRowProps } from '@iress-oss/ids-components';
+```
+
+
+---
+
+*View interactive examples: [https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-row--docs](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-row--docs)*

package/.ai/components/skeleton-recipes.md

@@ -0,0 +1,20 @@
+# Recipes
+
+Skeleton component documentation.
+
+> **Component:** `@iress-oss/ids-components`
+> **Storybook:** [Recipes in Storybook](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-skeleton--docs)
+
+## `IressCard`
+
+A common use case of the skeleton component is within a card component. Below are some examples of how you might use `IressSkeleton` within `IressCard`.
+
+```tsx
+<SkeletonCard />
+```
+
+[View "Card" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-skeleton--card)
+
+---
+
+*View interactive examples: [https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-skeleton--docs](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-skeleton--docs)*

package/.ai/components/skeleton.md

@@ -0,0 +1,103 @@
+# Skeleton
+
+Skeletons can increase perceived performance for users. As opposed to spinners, skeletons make it feel as though things are happening/loading immediately, then the information is incrementally displayed on the screen.
+
+> **Component:** `import { IressSkeleton } from '@iress-oss/ids-components'`
+> **Storybook:** [Skeleton in Storybook](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-skeleton--docs)
+
+## Quick Start
+
+```tsx
+import { IressSkeleton } from '@iress-oss/ids-components';
+
+<IressSkeleton />
+```
+
+import {
+  ComponentExample,
+  ComponentOverview,
+} from '@iress-oss/ids-storybook-config';
+
+## Examples
+
+### Modes
+
+The `mode` prop can be set to `text` (default), `rect` or `circle`.
+
+```tsx
+<IressStack gap="md">
+<IressSkeleton {...(args as IressSkeletonProps<'text'>)} mode="text" />
+<IressSkeleton mode="rect" height="100px" />
+<IressSkeleton mode="circle" height="100px" width="100px" />
+</IressStack>
+```
+
+[View "Mode" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-skeleton--mode)
+
+### Text
+
+`text` mode allows you to use `IressSkeleton` in place of `IressText` and keep the same sizing. To achieve this you can use `text` mode in conjunction with the `textVariant` prop.
+
+`text` also accepts the width prop but does not use the `height` prop like other modes. The height is achieved through font size and line height.
+
+```tsx
+<SkeletonText />
+```
+
+[View "Text" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-skeleton--text)
+
+### Rect
+
+`rect` mode allows you to use `IressSkeleton` in place of block elements, a good example would be in place of images.
+
+`rect` accepts both `width` and `height` props for sizing. It will default to 100% width and 100px height.
+
+```tsx
+<SkeletonRect />
+```
+
+[View "Rect" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-skeleton--rect)
+
+### Circle
+
+`circle` mode allows you to use `IressSkeleton` in place of circular elements, a good example would be for profile images.
+
+`circle` accepts both `width` and `height` props for sizing. It will default to 100% width and 100px height.
+
+```tsx
+<SkeletonCircle />
+```
+
+[View "Circle" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-skeleton--circle)
+
+### Size
+
+`width` and `height` props can be used to match the layout of the loaded content.
+
+These props accept any unit of dimension, but if no unit is provided it will default to pixels.
+
+**Note:** `height` will be ignored for text mode as this is calculated using the `IressText` component.
+
+```tsx
+<IressInline gap="md">
+{SKELETON_MODES.map((mode) => (
+<IressSkeleton key={mode} mode={mode} />
+))}
+</IressInline>
+```
+
+[View "Size" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-skeleton--size)
+
+## Props
+
+- **Type:** `IressSkeletonProps`
+- **Type declarations:** `@iress-oss/ids-components/dist/components/Skeleton/Skeleton.d.ts`
+
+```typescript
+import type { IressSkeletonProps } from '@iress-oss/ids-components';
+```
+
+
+---
+
+*View interactive examples: [https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-skeleton--docs](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-skeleton--docs)*

package/.ai/components/skip-link.md

@@ -0,0 +1,32 @@
+# SkipLink
+
+The skip link component allows keyboard users to quickly bypass the top-level navigation links and jump to the main content on a page.
+
+> **Component:** `import { IressSkipLink } from '@iress-oss/ids-components'`
+> **Storybook:** [SkipLink in Storybook](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-skip-link--docs)
+
+## Quick Start
+
+```tsx
+import { IressSkipLink } from '@iress-oss/ids-components';
+
+<IressSkipLink href="#main" />
+```
+
+## Behaviour
+
+- The skip link component is visually hidden until it is tabbed to.
+
+## Props
+
+- **Type:** `IressSkipLinkProps`
+- **Type declarations:** `@iress-oss/ids-components/dist/components/SkipLink/SkipLink.d.ts`
+
+```typescript
+import type { IressSkipLinkProps } from '@iress-oss/ids-components';
+```
+
+
+---
+
+*View interactive examples: [https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-skip-link--docs](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-skip-link--docs)*

package/.ai/components/slideout.md

@@ -0,0 +1,250 @@
+# Slideout
+
+Slideouts are used to show additional information or to allow users to perform secondary tasks without leaving their normal workflow.
+
+> **Component:** `import { IressSlideout } from '@iress-oss/ids-components'`
+> **Storybook:** [Slideout in Storybook](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-slideout--docs)
+
+## Quick Start
+
+```tsx
+import { IressSlideout } from '@iress-oss/ids-components';
+
+<IressSlideout footer="Footer slot">
+  Slideout content
+</IressSlideout>
+```
+
+import {
+  ComponentExample,
+  ComponentOverview,
+} from '@iress-oss/ids-storybook-config';
+
+## Controlling the slideout
+
+### Using the `show` property
+
+You can use state to control the slideout by setting the `show` property to `true` or `false`. To sync your state with the slideout, you can use the `onShowChange` prop, which is normally passed the set function from `useState`.
+
+```tsx
+<SlideoutUsingState />
+```
+
+[View "ShowWithState" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-slideout--show-with-state)
+
+### Using the `IressSlideoutProvider`
+
+You can use the `IressSlideoutProvider` to open and close slideout from anywhere in your application, as long as the slideout has a unique `id`. In this case you would use the `useSlideout` hook to open and close the slideout.
+
+To use, wrap your `<App/>` or the component that you want to use the `useSlideout` hook with `<IressSlideoutProvider />`.
+
+```tsx
+<AppWithSlideoutProvider {...args.slideout} />
+```
+
+[View "Provider" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-provider--provider)
+
+## Examples
+
+### Modes
+
+Slideouts can be used in two modes - `overlay` and `push`. In `overlay` mode the slideout sits on top of the content, useful if space is at a premium. In `push` mode the slideout will push the page container to make it smaller; this means you can see all of the page content when the page is available. Overlay is the default.
+
+```tsx
+const { showSlideout } = useSlideout();
+
+    return (
+      <IressPanel bg="alt">
+        <IressInline gap="md">
+          <IressButton onClick={() => showSlideout('overlay')}>
+            Overlay slideout
+          </IressButton>
+          <IressSlideout {...args} id="overlay" mode="overlay">
+            <h2>Overlay</h2>
+            For most situations <code>overlay</code> will be what you need,
+            which is why this is the default behaviour. You do not need to
+            specify the mode if you want your slideout to sit on top of the
+            page.
+          </IressSlideout>
+
+          <IressButton onClick={() => showSlideout('push')}>
+            Push slideout
+          </IressButton>
+          <IressSlideout
+            {...args}
+            id="push"
+            mode="push"
+            eleToPush="#storybook-docs, html"
+          >
+            <IressText>
+              <h2>Push</h2>
+              <p>
+                If you have a data-heavy screen where you need all of the data
+                to be visible when the slideout is open, use <code>push</code>.
+                To allow push to work you will need to supply the ID of the
+                element that needs to be pushed via the <code>eleToPush</code>{' '}
+                prop. If the ID is not supplied, or the element cannot be found,
+                the slideout will revert to <code>overlay</code> behaviour.
+              </p>
+              <p>
+                Be aware though that push will only work on larger screens
+                (&gt;1200px); on smaller screens the slideout will overlay the
+                content.
+              </p>
+              <IressPanel bg="alt">
+                <CurrentBreakpoint />
+              </IressPanel>
+            </IressText>
+          </IressSlideout>
+        </IressInline>
+      </IressPanel>
+    );
+```
+
+[View "Modes" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-slideout--modes)
+
+### Position
+
+Slideouts can appear from the left or the right of the screen. The default is right, but you can use the `position` prop to set it to slide in from the left.
+
+```tsx
+<SlideoutPositions />
+```
+
+[View "Position" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-slideout--position)
+
+### Size
+
+The width of your slideout can be set using the `size` prop. By default it is `sm`, but it can be made larger by setting `size` to `md`.
+
+```tsx
+<SlideoutSizes />
+```
+
+[View "Size" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-slideout--size)
+
+### Padding
+
+Slideout padding now is a global styling prop.
+
+[Learn more](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_styling-props-spacing--docs#padding)
+
+### Footer
+
+The `footer` prop is used to set content that should appear underneath the main content. Usually used for extra controls like buttons etc.
+
+[View "Footer" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-slideout--footer)
+
+### Absolute position slideouts
+
+By default, slideout is set to `position: fixed` which means it will appear from the edge of the browser window. By setting the `position: 'absolute'` in custom inline style, the slideout can appear from the edge of its closest relative positioned container. You will also need to set the `container` prop to the a reference of the relatively positioned container, so it can appear in the correct place in the DOM.
+
+If you're using an absolutely positioned slideout you may also want to change the vertical and horizontal positioning. By default this will be the top left or top right of the container, but you can use inline style `style={{top: '30px', height: 'calc(100% - 30px)'}}` to adjust that if you need to.
+
+```tsx
+<AbsolutePositionSlideout />
+```
+
+[View "AbsolutePosition" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-slideout--absolute-position)
+
+## Migrating to version 5
+
+### Adding the provider
+
+For your components to work as previously, you will need to set up the `IressSlideoutProvider` at the root of your application. This will allow you to use the `useSlideout` hook to open and close slideouts from anywhere in your application using the ID of the slideout.
+
+```tsx
+const App = () => (
+  <IressSlideoutProvider>Rest of app here</IressSlideoutProvider>
+);
+```
+
+### Testing
+
+In version 5, slideouts are rendered conditionally, meaning they will not be available in the DOM until they are shown. This means that you will need to update your tests to account for this, as you cannot interact with its contents until it is shown, unlike in version 4.
+
+See below for an example in version 4 and version 5.
+
+```tsx
+<DiffViewer
+allowModeChange
+oldValue={`import { render, waitFor, screen } from '@testing-library/react';
+import { idsFireEvent, componentLoad } from '@iress/ids-react-test-utils';
+
+test('opening and closing a slideout', async () => {
+await componentLoad([
+'slideout-trigger',
+'slideout',
+]);
+
+const trigger = screen.getByTestId('slideout-trigger');
+const slideout = screen.getByTestId('slideout');
+
+// In version 4, you can already interact with the slideout here as its in the DOM at this stage.
+
+// activate slideout
+idsFireEvent.click(trigger);
+await waitFor(() => expect(slideout).toBeVisible());
+
+// close slideout
+const closeButton = screen.getByTestId('slideout__close-button');
+idsFireEvent.click(closeButton);
+await waitFor(() => expect(slideout).not.toBeVisible());
+});`}
+newValue={`import { render, screen, waitForElementToBeRemoved } from '@testing-library/react';
+import { userEvent } from '@testing-library/user-event';
+
+test('opening and closing a slideout', async () => {
+const trigger = screen.getByRole('button', { name: /open slideout/i });
+
+// activate slideout
+await userEvent.click(trigger);
+const slideout = await screen.findByRole('complementary'); // this assumes the slideout has the role="complementary"
+
+// In version 5, you can only interact with the slideout once it has been loaded here.
+
+// close slideout
+const closeButton = screen.getByRole('button', { name: /close/i });
+await userEvent.click(closeButton);
+await waitForElementToBeRemoved(slideout);
+});`}
+/>
+```
+
+[View "V5TestDiff" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-slideout--v5test-diff)
+
+### Speed up tests
+
+You can speed up tests by wrapping your tests in a provider that overrides the theme tokens for animations.
+
+```tsx
+const themeOverrides: Record<string, string> = {
+  '--iress-slideout-animation-duration': '0s',
+};
+
+export const TestAppProvider = ({ children }: PropsWithChildren) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <IressModalProvider container={containerRef}>
+      <div style={themeOverrides} ref={containerRef}>
+        {children}
+      </div>
+    </IressModalProvider>
+  );
+};
+```
+
+## Props
+
+- **Type:** `IressSlideoutProps`
+- **Type declarations:** `@iress-oss/ids-components/dist/components/Slideout/Slideout.d.ts`
+
+```typescript
+import type { IressSlideoutProps } from '@iress-oss/ids-components';
+```
+
+
+---
+
+*View interactive examples: [https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-slideout--docs](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-slideout--docs)*

package/.ai/components/slider.md

@@ -0,0 +1,126 @@
+# Slider
+
+Sliders provide a visual indication of adjustable content, where the user can select a value from a range usually represented on a horizontal track.
+
+> **Component:** `import { IressSlider } from '@iress-oss/ids-components'`
+> **Storybook:** [Slider in Storybook](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-slider--docs)
+
+## Quick Start
+
+```tsx
+import { IressSlider } from '@iress-oss/ids-components';
+
+<IressSlider />
+```
+
+import {
+  ComponentExample,
+  ComponentOverview,
+} from '@iress-oss/ids-storybook-config';
+
+## Examples
+
+### Default value
+
+You can set the initial value of the slider using the `defaultValue` prop. If you would like to use a controlled slider, use the `value` prop and sync it with your state using `onChange`.
+
+```tsx
+<IressSlider defaultValue={3} />
+```
+
+[View "DefaultValue" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-slider--default-value)
+
+### Min, max and step
+
+To change the selectable values of the default slider you can change the `min`, `max` and `step` properties.
+
+For instance, if you set `min` to 10 and `max` to 100 the user is able to select any number between 10 and 100.
+
+By setting the `step` property to 10, for example, the user will only be able to select numbers in increments of ten i.e. 10, 20, 30, 40, 50, 60, 70, 80, 90, 100; as shown in the below example.
+
+```tsx
+<IressSlider min={10} max={100} step={10} />
+```
+
+[View "MinMaxAndStep" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-slider--min-max-and-step)
+
+### Ticks and labels
+
+It is also possible to include ticks and labels for selectable values. This can be done by using the `tickLabels` property and providing an array of numbers and/or `TickLabel` objects.
+
+The `TickLabel` object takes value/label pairs. The value is required, however, an optional label property can be provided. If the label property is not specified, slider will display the value for the label.
+
+If you provide an array of `TickLabel` objects, the value tooltip (the one that appears above the slider's thumb) will use the label from its matching value.
+
+The `tickLabels` prop can also be set to true, in which case they will automatically be inferred from `min`, `max` and `step`.
+
+```tsx
+<IressSlider min={0} max={200} step={20} />
+```
+
+[View "TicksAndLabels" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-slider--ticks-and-labels)
+
+### Flexible ticks and labels
+
+As of version 5, `min`, `max` and `step` is no longer automatically inferred from `tickLabels`, allowing you to have more flexible `tickLabels`.
+
+You can also use the `formatValue` prop to provide a formatted node to replace the value tooltip.
+
+```tsx
+<IressSlider max={50} />
+```
+
+[View "FlexibleTicksAndLabels" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-slider--flexible-ticks-and-labels)
+
+### Hidden labels
+
+Specific labels can be hidden for all or specified breakpoints. This can be done by using the `srOnly` property in the `TickLabel` object.
+
+When a label is set to hide on a certain breakpoint, it will be hidden on the screen from that breakpoint onwards. You can reveal it on a larger breakpoint by setting the larger breakpoint to false.
+
+1. To set the label to hide on all breakpoints you can set the xs property to true: `srOnly: { xs: true }`.
+2. To only show on md and above you can `srOnly: { xs: true, md: false }`.
+
+#### Behavior considerations
+
+- The labels will always be available to screen readers to ensure best accessibility, as screen readers are not confined by screen space.
+- The `ticksAndLabels` prop will still be used to match the `value` of the slider, even if its been set to be hidden on the user's screen.
+
+```tsx
+<IressStack gap="md">
+<IressPanel bg="alt">
+<IressText>
+<CurrentBreakpoint />
+</IressText>
+</IressPanel>
+<IressSlider />
+</IressStack>
+```
+
+[View "HiddenLabels" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-slider--hidden-labels)
+
+### Read only
+
+Sliders can be set to read only by using the `readOnly` property. When set to read only the slider will render a read only input and display the specified value.
+
+If you need more control over the read-only state (for example, rendering a stylised version of the value), you can use the [`IressReadonly` component](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-readonly--docs).
+
+```tsx
+<IressSlider min={0} max={200} step={20} value={0} readOnly />
+```
+
+[View "ReadOnly" example in Storybook →](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/story/components_components-slider--read-only)
+
+## Props
+
+- **Type:** `IressSliderProps`
+- **Type declarations:** `@iress-oss/ids-components/dist/components/Slider/Slider.d.ts`
+
+```typescript
+import type { IressSliderProps } from '@iress-oss/ids-components';
+```
+
+
+---
+
+*View interactive examples: [https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-slider--docs](https://main--691abcc79dfa560a36d0a74f.chromatic.com/?path=/docs/components_components-slider--docs)*