@primer/react/lib-esm/Timeline/Timeline.js

An implementation of GitHub's Primer Design System using React

import { clsx } from 'clsx';
import React from 'react';
import styled, { css } from 'styled-components';
import Box from '../Box/Box.js';
import { get } from '../constants.js';
import sx from '../sx.js';
import { toggleStyledComponent } from '../internal/utils/toggleStyledComponent.js';
import '../FeatureFlags/FeatureFlags.js';
import { useFeatureFlag } from '../FeatureFlags/useFeatureFlag.js';
import '../FeatureFlags/DefaultFeatureFlags.js';
import classes from './Timeline.module.css.js';
import { defaultSxProp } from '../utils/defaultSxProp.js';

function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga';
const ToggleTimeline = toggleStyledComponent(CSS_MODULES_FEATURE_FLAG, 'div', styled.div.withConfig({
  displayName: "Timeline__ToggleTimeline",
  componentId: "sc-1nkzbnu-0"
})(["display:flex;flex-direction:column;", " ", ";"], props => props.clipSidebar && css([".Timeline-Item:first-child{padding-top:0;}.Timeline-Item:last-child{padding-bottom:0;}"]), sx));
const Timeline = /*#__PURE__*/React.forwardRef(function Timeline({
  clipSidebar,
  className,
  ...props
}, forwardRef) {
  const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG);
  if (enabled) {
    return /*#__PURE__*/React.createElement(ToggleTimeline, _extends({}, props, {
      className: clsx(className, classes.Timeline),
      ref: forwardRef,
      "data-clip-sidebar": clipSidebar ? '' : undefined
    }));
  }
  return /*#__PURE__*/React.createElement(ToggleTimeline, _extends({}, props, {
    className: className,
    ref: forwardRef,
    clipSidebar: clipSidebar
  }));
});
Timeline.displayName = 'Timeline';
const ToggleTimelineItem = toggleStyledComponent(CSS_MODULES_FEATURE_FLAG, 'div', styled.div.attrs(props => ({
  className: clsx('Timeline-Item', props.className)
})).withConfig({
  displayName: "Timeline__ToggleTimelineItem",
  componentId: "sc-1nkzbnu-1"
})(["display:flex;position:relative;padding:", " 0;margin-left:", ";&::before{position:absolute;top:0;bottom:0;left:0;display:block;width:2px;content:'';background-color:", ";}", " ", ";"], get('space.3'), get('space.3'), get('colors.border.muted'), props => props.condensed && css(["padding-top:", ";padding-bottom:0;&:last-child{padding-bottom:", ";}.TimelineItem-Badge{height:16px;margin-top:", ";margin-bottom:", ";color:", ";background-color:", ";border:0;}"], get('space.1'), get('space.3'), get('space.2'), get('space.2'), get('colors.fg.muted'), get('colors.canvas.default')), sx));

/**
 * @deprecated Use the `TimelineItemProps` type instead
 */

const TimelineItem = /*#__PURE__*/React.forwardRef(function TimelineItem({
  condensed,
  className,
  ...props
}, forwardRef) {
  const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG);
  if (enabled) {
    return /*#__PURE__*/React.createElement(ToggleTimelineItem, _extends({}, props, {
      className: clsx(className, classes.TimelineItem),
      ref: forwardRef,
      "data-condensed": condensed ? '' : undefined
    }));
  }
  return /*#__PURE__*/React.createElement(ToggleTimelineItem, _extends({}, props, {
    className: className,
    ref: forwardRef,
    condensed: condensed
  }));
});
TimelineItem.displayName = 'TimelineItem';
const TimelineBadge = ({
  sx,
  className,
  ...props
}) => {
  const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG);
  if (enabled) {
    if (sx !== defaultSxProp) {
      return /*#__PURE__*/React.createElement("div", {
        className: classes.TimelineBadgeWrapper
      }, /*#__PURE__*/React.createElement(Box, _extends({}, props, {
        sx: sx,
        className: clsx(className, classes.TimelineBadge)
      })));
    }
    return /*#__PURE__*/React.createElement("div", {
      className: classes.TimelineBadgeWrapper
    }, /*#__PURE__*/React.createElement("div", _extends({}, props, {
      className: clsx(className, classes.TimelineBadge)
    })));
  }
  return /*#__PURE__*/React.createElement(Box, {
    position: "relative",
    zIndex: 1
  }, /*#__PURE__*/React.createElement(Box, {
    display: "flex",
    className: "TimelineItem-Badge",
    flexShrink: 0,
    borderRadius: "50%",
    borderWidth: "2px",
    borderStyle: "solid",
    borderColor: "canvas.default",
    overflow: "hidden",
    color: "fg.muted",
    bg: "timeline.badgeBg",
    width: "32px",
    height: "32px",
    mr: 2,
    ml: "-15px",
    alignItems: "center",
    justifyContent: "center",
    sx: sx
  }, props.children));
};
TimelineBadge.displayName = "TimelineBadge";
TimelineBadge.displayName = 'Timeline.Badge';
const ToggleTimelineBody = toggleStyledComponent(CSS_MODULES_FEATURE_FLAG, 'div', styled.div.withConfig({
  displayName: "Timeline__ToggleTimelineBody",
  componentId: "sc-1nkzbnu-2"
})(["min-width:0;max-width:100%;margin-top:", ";color:", ";flex:auto;font-size:", ";", ";"], get('space.1'), get('colors.fg.muted'), get('fontSizes.1'), sx));
const TimelineBody = /*#__PURE__*/React.forwardRef(function TimelineBody({
  className,
  ...props
}, forwardRef) {
  const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG);
  if (enabled) {
    return /*#__PURE__*/React.createElement(ToggleTimelineBody, _extends({}, props, {
      className: clsx(className, classes.TimelineBody),
      ref: forwardRef
    }));
  }
  return /*#__PURE__*/React.createElement(ToggleTimelineBody, _extends({}, props, {
    className: className,
    ref: forwardRef
  }));
});
TimelineBody.displayName = 'TimelineBody';
const ToggleTimelineBreak = toggleStyledComponent(CSS_MODULES_FEATURE_FLAG, 'div', styled.div.withConfig({
  displayName: "Timeline__ToggleTimelineBreak",
  componentId: "sc-1nkzbnu-3"
})(["position:relative;z-index:1;height:24px;margin:0;margin-bottom:-", ";margin-left:0;background-color:", ";border:0;border-top:", " solid ", ";", ";"], get('space.3'), get('colors.canvas.default'), get('space.1'), get('colors.border.default'), sx));
const TimelineBreak = /*#__PURE__*/React.forwardRef(function TimelineBreak({
  className,
  ...props
}, forwardRef) {
  const enabled = useFeatureFlag(CSS_MODULES_FEATURE_FLAG);
  if (enabled) {
    return /*#__PURE__*/React.createElement(ToggleTimelineBreak, _extends({}, props, {
      className: clsx(className, classes.TimelineBreak),
      ref: forwardRef
    }));
  }
  return /*#__PURE__*/React.createElement(ToggleTimelineBreak, _extends({}, props, {
    className: className,
    ref: forwardRef
  }));
});
TimelineBreak.displayName = 'TimelineBreak';
var Timeline$1 = Object.assign(Timeline, {
  Item: TimelineItem,
  Badge: TimelineBadge,
  Body: TimelineBody,
  Break: TimelineBreak
});

export { Timeline$1 as default };