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

An implementation of GitHub's Primer Design System using React

'use strict';

var clsx = require('clsx');
var React = require('react');
var styled = require('styled-components');
var Box = require('../Box/Box.js');
var constants = require('../constants.js');
var sx = require('../sx.js');
var toggleStyledComponent = require('../internal/utils/toggleStyledComponent.js');
require('../FeatureFlags/FeatureFlags.js');
var useFeatureFlag = require('../FeatureFlags/useFeatureFlag.js');
require('../FeatureFlags/DefaultFeatureFlags.js');
var Timeline_module = require('./Timeline.module.css.js');
var defaultSxProp = require('../utils/defaultSxProp.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var styled__default = /*#__PURE__*/_interopDefault(styled);

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.toggleStyledComponent(CSS_MODULES_FEATURE_FLAG, 'div', styled__default.default.div.withConfig({
  displayName: "Timeline__ToggleTimeline",
  componentId: "sc-1nkzbnu-0"
})(["display:flex;flex-direction:column;", " ", ";"], props => props.clipSidebar && styled.css([".Timeline-Item:first-child{padding-top:0;}.Timeline-Item:last-child{padding-bottom:0;}"]), sx.default));
const Timeline = /*#__PURE__*/React__default.default.forwardRef(function Timeline({
  clipSidebar,
  className,
  ...props
}, forwardRef) {
  const enabled = useFeatureFlag.useFeatureFlag(CSS_MODULES_FEATURE_FLAG);
  if (enabled) {
    return /*#__PURE__*/React__default.default.createElement(ToggleTimeline, _extends({}, props, {
      className: clsx.clsx(className, Timeline_module.Timeline),
      ref: forwardRef,
      "data-clip-sidebar": clipSidebar ? '' : undefined
    }));
  }
  return /*#__PURE__*/React__default.default.createElement(ToggleTimeline, _extends({}, props, {
    className: className,
    ref: forwardRef,
    clipSidebar: clipSidebar
  }));
});
Timeline.displayName = 'Timeline';
const ToggleTimelineItem = toggleStyledComponent.toggleStyledComponent(CSS_MODULES_FEATURE_FLAG, 'div', styled__default.default.div.attrs(props => ({
  className: clsx.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:", ";}", " ", ";"], constants.get('space.3'), constants.get('space.3'), constants.get('colors.border.muted'), props => props.condensed && styled.css(["padding-top:", ";padding-bottom:0;&:last-child{padding-bottom:", ";}.TimelineItem-Badge{height:16px;margin-top:", ";margin-bottom:", ";color:", ";background-color:", ";border:0;}"], constants.get('space.1'), constants.get('space.3'), constants.get('space.2'), constants.get('space.2'), constants.get('colors.fg.muted'), constants.get('colors.canvas.default')), sx.default));

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

const TimelineItem = /*#__PURE__*/React__default.default.forwardRef(function TimelineItem({
  condensed,
  className,
  ...props
}, forwardRef) {
  const enabled = useFeatureFlag.useFeatureFlag(CSS_MODULES_FEATURE_FLAG);
  if (enabled) {
    return /*#__PURE__*/React__default.default.createElement(ToggleTimelineItem, _extends({}, props, {
      className: clsx.clsx(className, Timeline_module.TimelineItem),
      ref: forwardRef,
      "data-condensed": condensed ? '' : undefined
    }));
  }
  return /*#__PURE__*/React__default.default.createElement(ToggleTimelineItem, _extends({}, props, {
    className: className,
    ref: forwardRef,
    condensed: condensed
  }));
});
TimelineItem.displayName = 'TimelineItem';
const TimelineBadge = ({
  sx,
  className,
  ...props
}) => {
  const enabled = useFeatureFlag.useFeatureFlag(CSS_MODULES_FEATURE_FLAG);
  if (enabled) {
    if (sx !== defaultSxProp.defaultSxProp) {
      return /*#__PURE__*/React__default.default.createElement("div", {
        className: Timeline_module.TimelineBadgeWrapper
      }, /*#__PURE__*/React__default.default.createElement(Box, _extends({}, props, {
        sx: sx,
        className: clsx.clsx(className, Timeline_module.TimelineBadge)
      })));
    }
    return /*#__PURE__*/React__default.default.createElement("div", {
      className: Timeline_module.TimelineBadgeWrapper
    }, /*#__PURE__*/React__default.default.createElement("div", _extends({}, props, {
      className: clsx.clsx(className, Timeline_module.TimelineBadge)
    })));
  }
  return /*#__PURE__*/React__default.default.createElement(Box, {
    position: "relative",
    zIndex: 1
  }, /*#__PURE__*/React__default.default.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.toggleStyledComponent(CSS_MODULES_FEATURE_FLAG, 'div', styled__default.default.div.withConfig({
  displayName: "Timeline__ToggleTimelineBody",
  componentId: "sc-1nkzbnu-2"
})(["min-width:0;max-width:100%;margin-top:", ";color:", ";flex:auto;font-size:", ";", ";"], constants.get('space.1'), constants.get('colors.fg.muted'), constants.get('fontSizes.1'), sx.default));
const TimelineBody = /*#__PURE__*/React__default.default.forwardRef(function TimelineBody({
  className,
  ...props
}, forwardRef) {
  const enabled = useFeatureFlag.useFeatureFlag(CSS_MODULES_FEATURE_FLAG);
  if (enabled) {
    return /*#__PURE__*/React__default.default.createElement(ToggleTimelineBody, _extends({}, props, {
      className: clsx.clsx(className, Timeline_module.TimelineBody),
      ref: forwardRef
    }));
  }
  return /*#__PURE__*/React__default.default.createElement(ToggleTimelineBody, _extends({}, props, {
    className: className,
    ref: forwardRef
  }));
});
TimelineBody.displayName = 'TimelineBody';
const ToggleTimelineBreak = toggleStyledComponent.toggleStyledComponent(CSS_MODULES_FEATURE_FLAG, 'div', styled__default.default.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 ", ";", ";"], constants.get('space.3'), constants.get('colors.canvas.default'), constants.get('space.1'), constants.get('colors.border.default'), sx.default));
const TimelineBreak = /*#__PURE__*/React__default.default.forwardRef(function TimelineBreak({
  className,
  ...props
}, forwardRef) {
  const enabled = useFeatureFlag.useFeatureFlag(CSS_MODULES_FEATURE_FLAG);
  if (enabled) {
    return /*#__PURE__*/React__default.default.createElement(ToggleTimelineBreak, _extends({}, props, {
      className: clsx.clsx(className, Timeline_module.TimelineBreak),
      ref: forwardRef
    }));
  }
  return /*#__PURE__*/React__default.default.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
});

module.exports = Timeline$1;