@dnb/eufemia/components/step-indicator/StepIndicatorList.js

DNB Eufemia Design System UI Library

"use client";

import React, { useContext } from 'react';
import clsx from 'clsx';
import Space from "../space/Space.js";
import { skeletonDOMAttributes, createSkeletonClass } from "../skeleton/SkeletonHelper.js";
import HeightAnimation from "../height-animation/HeightAnimation.js";
import StepIndicatorItem from "./StepIndicatorItem.js";
import StepIndicatorContext from "./StepIndicatorContext.js";
import { jsx as _jsx } from "react/jsx-runtime";
function StepIndicatorList() {
  const {
    mode,
    skeleton,
    open,
    openHandler,
    closeHandler,
    countSteps,
    data,
    noAnimation
  } = useContext(StepIndicatorContext);
  const Element = mode === 'static' ? 'div' : 'nav';
  const params = {};
  skeletonDOMAttributes(params, skeleton);
  return _jsx(HeightAnimation, {
    animate: !noAnimation,
    open: open,
    onOpen: state => {
      if (state) {
        openHandler();
      } else {
        closeHandler();
      }
    },
    children: _jsx(Space, {
      innerSpace: {
        top: 'small'
      },
      children: _jsx(Element, {
        ...params,
        className: clsx('dnb-step-indicator', createSkeletonClass('font', skeleton)),
        children: countSteps > 0 && _jsx("ol", {
          className: "dnb-step-indicator__list",
          children: data.map((itemData, i) => {
            const item = typeof itemData === 'string' ? {
              title: itemData
            } : itemData;
            return _jsx(StepIndicatorItem, {
              currentItemNum: i,
              ...item
            }, i);
          })
        })
      })
    })
  });
}
export default StepIndicatorList;
//# sourceMappingURL=StepIndicatorList.js.map