Stepper

Демо данные
export const items = [
    {
        title: 'Title text must be here',
        text: 'Description text must be short and easy to understand',
        linkText: 'Подробнее',
        linkUrl: '/components/stepper/',
    },
    {
        title: 'Title text must be here',
        text: 'Description text must be short and easy to understand',
        linkText: 'Подробнее',
        linkUrl: '/components/stepper/',
    },
    {
        title: 'Title text must be here',
        text: 'Description text must be short and easy to understand',
        linkText: 'Подробнее',
        linkUrl: '/components/stepper/',
    },
];

export const itemsOnlyTitle = [
    {
        title: 'Title text must be here',
    },
    {
        title: 'Title text must be here',
    },
    {
        title: 'Title text must be here',
    },
    {
        title: 'Title text must be here',
    },
    {
        title: 'Title text must be here',
    },
];

export const itemsOnlyText = [
    {
        text: 'Description text must be short and easy to understand',
    },
    {
        text: 'Description text must be short and easy to understand',
    },
    {
        text: 'Description text must be short and easy to understand',
    },
    {
        text: 'Description text must be short and easy to understand',
    },
    {
        text: 'Description text must be short and easy to understand',
    },
];

export const itemsWithIcon = [
    {
        title: 'Title text must be here',
        text: 'Description text must be short and easy to understand',
        linkText: 'Подробнее',
        linkUrl: '/components/stepper/',
        icon: <CallIcon />,
    },
    {
        title: 'Title text must be here',
        text: 'Description text must be short and easy to understand',
        linkText: 'Подробнее',
        linkUrl: '/components/stepper/',
        icon: <EsimIcon />,
    },
    {
        title: 'Title text must be here',
        text: 'Description text must be short and easy to understand',
        linkText: 'Подробнее',
        linkUrl: '/components/stepper/',
        icon: <LightningIcon />,
    },
];

export const itemsWithTitleText = [
    {
        title: 'Title text must be here',
        text: 'Description text must be short and easy to understand',
    },
    {
        title: 'Title text must be here',
        text: 'Description text must be short and easy to understand',
    },
    {
        title: 'Title text must be here',
        text: 'Description text must be short and easy to understand',
    },
];

export const itemsManySteps = [
    {
        title: 'Title text must be here',
        text: 'Description text must be short and easy to understand',
        linkText: 'Подробнее',
        linkUrl: '/components/stepper/',
    },
    {
        title: 'Title text must be here',
        text: 'Description text must be short and easy to understand',
        linkText: 'Подробнее',
        linkUrl: '/components/stepper/',
    },
    {
        title: 'Title text must be here',
        text: 'Description text must be short and easy to understand',
        linkText: 'Подробнее',
        linkUrl: '/components/stepper/',
    },
    {
        title: 'Title text must be here',
        text: 'Description text must be short and easy to understand',
        linkText: 'Подробнее',
        linkUrl: '/components/stepper/',
    },
    {
        title: 'Title text must be here',
        text: 'Description text must be short and easy to understand',
        linkText: 'Подробнее',
        linkUrl: '/components/stepper/',
    },
    {
        title: 'Title text must be here',
        text: 'Description text must be short and easy to understand',
        linkText: 'Подробнее',
        linkUrl: '/components/stepper/',
    },
    {
        title: 'Title text must be here',
        text: 'Description text must be short and easy to understand',
        linkText: 'Подробнее',
        linkUrl: '/components/stepper/',
    },
    {
        title: 'Title text must be here',
        text: 'Description text must be short and easy to understand',
        linkText: 'Подробнее',
        linkUrl: '/components/stepper/',
    },
    {
        title: 'Title text must be here',
        text: 'Description text must be short and easy to understand',
        linkText: 'Подробнее',
        linkUrl: '/components/stepper/',
    },
];

export const numericTitleSteps = [
    {
        title: '1 Title text',
        text: 'Description text must be short and easy to understand',
        linkText: 'Подробнее',
        linkUrl: '/components/stepper/',
    },
    {
        title: '2 Title text',
        text: 'Description text must be short and easy to understand',
        linkText: 'Подробнее',
        linkUrl: '/components/stepper/',
    },
    {
        title: '3 Title text',
        text: 'Description text must be short and easy to understand',
        linkText: 'Подробнее',
        linkUrl: '/components/stepper/',
    },
    {
        title: '4 Title text',
        text: 'Description text must be short and easy to understand',
        linkText: 'Подробнее',
        linkUrl: '/components/stepper/',
    },
    {
        title: '5 Title text',
        text: 'Description text must be short and easy to understand',
        linkText: 'Подробнее',
        linkUrl: '/components/stepper/',
    },
];

Базовое использование

<ContentArea>
  <Stepper stepCount={5} activeStep={2} />
</ContentArea>

Цифры вместо галочек

<ContentArea>
  <Stepper stepCount={5} activeStep={2} isNumeric />
</ContentArea>

С заголовком, текстом и ссылкой

<ContentArea>
  <Stepper activeStep={1} items={items} />
</ContentArea>

Только заголовок

<ContentArea>
  <Stepper activeStep={2} items={itemsOnlyTitle} />
</ContentArea>

Только текст

<ContentArea>
  <Stepper activeStep={2} items={itemsOnlyText} />
</ContentArea>

С вертикальной ориентацией

<ContentArea>
  <Stepper activeStep={1} isHorizontal={false} items={items} />
</ContentArea>

С иконками

<ContentArea>
  <Stepper stepCount={5} activeStep={1} items={itemsWithIcon} />
</ContentArea>

Все шаги пройдены

<ContentArea>
  <Stepper isAllChecked items={itemsWithTitleText} />
</ContentArea>

По левому краю

<ContentArea>
  <Stepper align='left' activeStep={1} items={items} />
</ContentArea>

Большое количество и заблокировано переключение шагов

<ContentArea>
  <Stepper activeStep={2} isDisabled items={itemsManySteps} />
</ContentArea>

Отображение контента только активного шага

<ContentArea>
  <Stepper activeStep={1} showActiveStepContent items={numericTitleSteps} />
</ContentArea>