@dnb/eufemia/components/timeline/TimelineItem.js

DNB Eufemia Design System UI Library

"use client";

var _AlignmentHelper;
import React from 'react';
import clsx from 'clsx';
import FormStatus from "../form-status/FormStatus.js";
import IconPrimary from "../icon-primary/IconPrimary.js";
import { createSkeletonClass } from "../skeleton/SkeletonHelper.js";
import checkIcon from "../../icons/check.js";
import calendarIcon from "../../icons/calendar.js";
import pinIcon from "../../icons/pin.js";
import Context from "../../shared/Context.js";
import { extendPropsWithContext } from "../../shared/component-helper.js";
import AlignmentHelper from "../../shared/AlignmentHelper.js";
import TimelineContext from "./TimelineContext.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const defaultProps = {
  icon: null,
  iconAlt: null,
  title: null,
  subtitle: null,
  infoMessage: null,
  state: null,
  skeleton: false
};
const TimelineItem = localProps => {
  const context = React.useContext(Context);
  const timelineContext = React.useContext(TimelineContext);
  const allProps = extendPropsWithContext(localProps, defaultProps, context === null || context === void 0 ? void 0 : context.TimelineItem, {
    skeleton: context === null || context === void 0 ? void 0 : context.skeleton
  }, timelineContext);
  const {
    icon,
    iconAlt,
    title,
    subtitle,
    infoMessage,
    state,
    skeleton,
    ...props
  } = allProps;
  const skeletonClasses = createSkeletonClass('font', skeleton, context);
  const classes = clsx(`dnb-timeline__item dnb-timeline__item--${state}`, skeletonClasses);
  return _jsxs("li", {
    className: classes,
    "aria-current": state === 'current' ? 'step' : undefined,
    ...props,
    children: [_jsx(TimelineItemLabel, {
      state: state,
      title: title,
      icon: icon,
      iconAlt: iconAlt,
      skeleton: skeleton,
      translations: context.translation.TimelineItem
    }), _jsx(TimelineItemContent, {
      subtitle: subtitle,
      infoMessage: infoMessage
    })]
  });
};
const TimelineItemLabel = ({
  title,
  ...iconProps
}) => {
  return _jsxs("span", {
    className: "dnb-timeline__item__label",
    children: [_jsx(TimelineItemIcon, {
      ...iconProps
    }), _jsx(TimelineItemTitle, {
      title: title
    })]
  });
};
const TimelineItemIcon = ({
  icon,
  state,
  iconAlt,
  skeleton,
  translations
}) => {
  const {
    altLabelCompleted,
    altLabelCurrent,
    altLabelUpcoming
  } = translations;
  const icons = {
    completed: checkIcon,
    current: pinIcon,
    upcoming: calendarIcon
  };
  const labels = {
    completed: altLabelCompleted,
    current: altLabelCurrent,
    upcoming: altLabelUpcoming
  };
  const currentIcon = icon || icons[state];
  const currentAltLabel = iconAlt || labels[state];
  return _jsxs("span", {
    className: "dnb-timeline__item__label__icon",
    children: [_AlignmentHelper || (_AlignmentHelper = _jsx(AlignmentHelper, {
      pseudoElementOnly: true
    })), !skeleton && currentIcon && _jsx(IconPrimary, {
      icon: currentIcon,
      alt: currentAltLabel,
      size: state === 'current' ? undefined : 'small'
    })]
  });
};
const TimelineItemTitle = ({
  title
}) => {
  return _jsx("span", {
    className: "dnb-timeline__item__label__title",
    children: title
  });
};
const TimelineItemContent = ({
  subtitle,
  infoMessage
}) => {
  var _TimelineItemSubtitle;
  const renderSubtitles = () => {
    if (!subtitle) {
      return null;
    }
    if (Array.isArray(subtitle)) {
      return subtitle.map((subtitle, i) => _jsx(TimelineItemSubtitle, {
        subtitle: subtitle
      }, i));
    }
    return _TimelineItemSubtitle || (_TimelineItemSubtitle = _jsx(TimelineItemSubtitle, {
      subtitle: subtitle
    }));
  };
  return _jsxs("div", {
    className: "dnb-timeline__item__content",
    children: [renderSubtitles(), infoMessage && _jsx(FormStatus, {
      text: infoMessage,
      state: "information",
      className: "dnb-timeline__item__content__info",
      stretch: true
    })]
  });
};
const TimelineItemSubtitle = ({
  subtitle
}) => _jsx("div", {
  className: "dnb-timeline__item__content__subtitle",
  children: subtitle
});
export default TimelineItem;
//# sourceMappingURL=TimelineItem.js.map