import _styled from "styled-components";
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import React from 'react';
import styled, { css } from 'styled-components';
import { format } from 'date-fns';
import { ColorDanger500, ColorNeutral100, ColorNeutral200, selectors } from '@defencedigital/design-tokens';
import { Timeline, TimelineEvent, TimelineEvents, TimelineHours, TimelineRow, TimelineRows, TimelineTodayMarker, TimelineMonths, TimelineWeeks, TimelineDays } from '.';
import { TIMELINE_BLOCK_SIZE } from './constants';
import { storyAccessibilityConfig } from '../../a11y/storyAccessibilityConfig';
var fontSize = selectors.fontSize;
export default {
  component: Timeline,
  subcomponents: {
    TimelineEvent: TimelineEvent,
    TimelineEvents: TimelineEvents,
    TimelineHours: TimelineHours,
    TimelineRow: TimelineRow,
    TimelineRows: TimelineRows,
    TimelineTodayMarker: TimelineTodayMarker,
    TimelineMonths: TimelineMonths,
    TimelineWeeks: TimelineWeeks,
    TimelineDays: TimelineDays
  },
  title: 'Compound Timeline',
  parameters: {
    actions: {
      argTypesRegex: '^on.*'
    },
    a11y: {
      config: {
        rules: storyAccessibilityConfig['Compound Timeline']
      }
    },
    docs: {
      description: {
        component: 'A collection of composable and presentation agnostic Compound Components, Hooks and a Context Provider, to help aid in the creation of scheduling based user-interfaces. Visit the [Compound Timeline microsite](https://design-system.digital.mod.uk/timeline) for more comprehensive documentation.'
      }
    },
    layout: 'fullscreen'
  },
  argTypes: {
    endDate: {
      control: {
        type: 'date'
      }
    },
    startDate: {
      control: {
        type: 'date'
      }
    },
    today: {
      control: {
        type: 'date'
      }
    }
  }
};
var Template = function Template(args) {
  return /*#__PURE__*/React.createElement(Timeline, args, /*#__PURE__*/React.createElement(TimelineTodayMarker, null), /*#__PURE__*/React.createElement(TimelineMonths, null), /*#__PURE__*/React.createElement(TimelineWeeks, null), /*#__PURE__*/React.createElement(TimelineDays, null), /*#__PURE__*/React.createElement(TimelineRows, null));
};
export var Default = Template.bind({});
Default.args = {
  startDate: new Date(2022, 0, 1),
  today: new Date(2022, 0, 15)
};
Default.storyName = 'No data';
export var BoundByFixedDates = Template.bind({});
BoundByFixedDates.args = {
  endDate: new Date(2021, 1, 15),
  startDate: new Date(2021, 0, 13),
  today: new Date(2021, 0, 15)
};
BoundByFixedDates.storyName = 'Bound by fixed dates';
export var WithData = function WithData(props) {
  return /*#__PURE__*/React.createElement(Timeline, _extends({}, props, {
    startDate: new Date(2020, 9, 1),
    today: new Date(2020, 9, 15, 12)
  }), /*#__PURE__*/React.createElement(TimelineTodayMarker, null), /*#__PURE__*/React.createElement(TimelineMonths, null), /*#__PURE__*/React.createElement(TimelineWeeks, null), /*#__PURE__*/React.createElement(TimelineDays, null), /*#__PURE__*/React.createElement(TimelineRows, null, /*#__PURE__*/React.createElement(TimelineRow, {
    name: "Row 1"
  }, /*#__PURE__*/React.createElement(TimelineEvents, null, /*#__PURE__*/React.createElement(TimelineEvent, {
    startDate: new Date(2020, 9, 14, 12),
    endDate: new Date(2020, 9, 18, 12)
  }, "Event 1"))), /*#__PURE__*/React.createElement(TimelineRow, {
    name: "Row 2"
  }, /*#__PURE__*/React.createElement(TimelineEvents, null, /*#__PURE__*/React.createElement(TimelineEvent, {
    startDate: new Date(2020, 9, 3),
    endDate: new Date(2020, 9, 8)
  }, "Event 2")))));
};
WithData.storyName = 'With data';
export var VirtualizedRows = function VirtualizedRows(props) {
  return /*#__PURE__*/React.createElement(Timeline, _extends({}, props, {
    startDate: new Date(2020, 9, 1),
    today: new Date(2020, 9, 15, 12),
    isFullWidth: true,
    range: 3
  }), /*#__PURE__*/React.createElement(TimelineTodayMarker, null), /*#__PURE__*/React.createElement(TimelineMonths, null), /*#__PURE__*/React.createElement(TimelineWeeks, null), /*#__PURE__*/React.createElement(TimelineDays, null), /*#__PURE__*/React.createElement(TimelineRows, {
    isVirtualized: true
  }, _toConsumableArray(Array(100)).map(function (_, index) {
    return /*#__PURE__*/React.createElement(TimelineRow, {
      name: "Row ".concat(index)
    }, /*#__PURE__*/React.createElement(TimelineEvents, null, /*#__PURE__*/React.createElement(TimelineEvent, {
      startDate: new Date(2020, 9, 14, 12),
      endDate: new Date(2020, 9, 18, 12)
    }, "Event 1")));
  })));
};
VirtualizedRows.storyName = 'Virtualized rows';
export var WithSidebar = function WithSidebar(props) {
  return /*#__PURE__*/React.createElement(Timeline, _extends({}, props, {
    hasSide: true,
    startDate: new Date(2020, 3, 1),
    today: new Date(2020, 3, 15)
  }), /*#__PURE__*/React.createElement(TimelineTodayMarker, null), /*#__PURE__*/React.createElement(TimelineMonths, null), /*#__PURE__*/React.createElement(TimelineWeeks, null), /*#__PURE__*/React.createElement(TimelineDays, null), /*#__PURE__*/React.createElement(TimelineRows, null, /*#__PURE__*/React.createElement(TimelineRow, {
    name: "Row 1"
  }, /*#__PURE__*/React.createElement(TimelineEvents, null, /*#__PURE__*/React.createElement(TimelineEvent, {
    startDate: new Date(2020, 2, 14),
    endDate: new Date(2020, 3, 18)
  }, "Event 1"))), /*#__PURE__*/React.createElement(TimelineRow, {
    name: "Row 2"
  }, /*#__PURE__*/React.createElement(TimelineEvents, null, /*#__PURE__*/React.createElement(TimelineEvent, {
    startDate: new Date(2020, 3, 3),
    endDate: new Date(2020, 3, 8)
  }, "Event 2"))), /*#__PURE__*/React.createElement(TimelineRow, {
    name: "Row 3"
  }, /*#__PURE__*/React.createElement(TimelineEvents, null, /*#__PURE__*/React.createElement(TimelineEvent, {
    startDate: new Date(2020, 1, 3),
    endDate: new Date(2020, 7, 8)
  }, "Event 2")))));
};
WithSidebar.storyName = 'With sidebar';
export var WithHours = function WithHours(props) {
  return /*#__PURE__*/React.createElement(Timeline, _extends({}, props, {
    hasSide: true,
    startDate: new Date(2020, 3, 1),
    today: new Date(2020, 3, 15)
  }), /*#__PURE__*/React.createElement(TimelineTodayMarker, null), /*#__PURE__*/React.createElement(TimelineMonths, null), /*#__PURE__*/React.createElement(TimelineWeeks, null), /*#__PURE__*/React.createElement(TimelineDays, null), /*#__PURE__*/React.createElement(TimelineHours, {
    blockSize: TIMELINE_BLOCK_SIZE.QUARTER_DAY
  }), /*#__PURE__*/React.createElement(TimelineRows, null, /*#__PURE__*/React.createElement(TimelineRow, {
    name: "Row 1"
  }, /*#__PURE__*/React.createElement(TimelineEvents, null, /*#__PURE__*/React.createElement(TimelineEvent, {
    startDate: new Date(2020, 3, 5, 6, 0, 0),
    endDate: new Date(2020, 3, 7, 18, 0, 0)
  }, "Event 1"))), /*#__PURE__*/React.createElement(TimelineRow, {
    name: "Row 2"
  }, /*#__PURE__*/React.createElement(TimelineEvents, null, /*#__PURE__*/React.createElement(TimelineEvent, {
    startDate: new Date(2020, 3, 3, 12, 0, 0),
    endDate: new Date(2020, 3, 6, 12, 0, 0)
  }, "Event 2")))));
};
WithHours.storyName = 'With hours';
var StyledCustomTimelineMonth = styled.span.withConfig({
  displayName: "Timelinestories__StyledCustomTimelineMonth",
  componentId: "sc-o0b4j7-0"
})(["display:inline-block;width:", "px;height:4rem;background-color:black;color:white;border-left:1px solid white;padding-left:0.5rem;"], function (_ref) {
  var dayWidth = _ref.dayWidth,
    daysTotal = _ref.daysTotal;
  return dayWidth * daysTotal;
});
export var WithCustomMonths = function WithCustomMonths(props) {
  return /*#__PURE__*/React.createElement(Timeline, _extends({}, props, {
    hasSide: true,
    startDate: new Date(2020, 3, 1),
    today: new Date(2020, 3, 15)
  }), /*#__PURE__*/React.createElement(TimelineTodayMarker, null), /*#__PURE__*/React.createElement(TimelineMonths, {
    render: function render(_ref2) {
      var dayWidth = _ref2.dayWidth,
        daysTotal = _ref2.daysTotal,
        startDate = _ref2.startDate;
      return /*#__PURE__*/React.createElement(StyledCustomTimelineMonth, {
        dayWidth: dayWidth,
        daysTotal: daysTotal
      }, format(startDate, 'MMMM yyyy'));
    }
  }), /*#__PURE__*/React.createElement(TimelineWeeks, null), /*#__PURE__*/React.createElement(TimelineDays, null), /*#__PURE__*/React.createElement(TimelineRows, null));
};
WithCustomMonths.storyName = 'With custom months';
var StyledCustomTimelineWeek = styled.span.withConfig({
  displayName: "Timelinestories__StyledCustomTimelineWeek",
  componentId: "sc-o0b4j7-1"
})(["display:inline-block;margin-left:", ";width:", ";height:2.5rem;background-color:", ";color:", ";border-top:1px solid black;border-bottom:1px solid black;padding-left:0.5rem;"], function (_ref3) {
  var offsetPx = _ref3.offsetPx;
  return offsetPx;
}, function (_ref4) {
  var widthPx = _ref4.widthPx;
  return widthPx;
}, function (_ref5) {
  var isOddNumber = _ref5.isOddNumber;
  return isOddNumber ? 'black' : 'white';
}, function (_ref6) {
  var isOddNumber = _ref6.isOddNumber;
  return isOddNumber ? 'white' : 'black';
});
export var WithCustomWeeks = function WithCustomWeeks(props) {
  return /*#__PURE__*/React.createElement(Timeline, _extends({}, props, {
    hasSide: true,
    startDate: new Date(2020, 3, 1),
    today: new Date(2020, 3, 15)
  }), /*#__PURE__*/React.createElement(TimelineTodayMarker, null), /*#__PURE__*/React.createElement(TimelineMonths, null), /*#__PURE__*/React.createElement(TimelineWeeks, {
    render: function render(_ref7) {
      var isOddNumber = _ref7.isOddNumber,
        offsetPx = _ref7.offsetPx,
        widthPx = _ref7.widthPx,
        startDate = _ref7.startDate;
      return /*#__PURE__*/React.createElement(StyledCustomTimelineWeek, {
        isOddNumber: isOddNumber,
        offsetPx: offsetPx,
        widthPx: widthPx
      }, format(startDate, 'dd/MM'));
    }
  }), /*#__PURE__*/React.createElement(TimelineDays, null), /*#__PURE__*/React.createElement(TimelineRows, null));
};
WithCustomWeeks.storyName = 'With custom weeks';
var StyledCustomTimelineDays = styled.span.withConfig({
  displayName: "Timelinestories__StyledCustomTimelineDays",
  componentId: "sc-o0b4j7-2"
})(["display:inline-block;width:", "px;height:2.5rem;background-color:black;color:white;"], function (_ref8) {
  var dayWidth = _ref8.dayWidth;
  return dayWidth;
});
export var WithCustomDays = function WithCustomDays(props) {
  return /*#__PURE__*/React.createElement(Timeline, _extends({}, props, {
    hasSide: true,
    startDate: new Date(2020, 3, 1),
    today: new Date(2020, 3, 15)
  }), /*#__PURE__*/React.createElement(TimelineTodayMarker, null), /*#__PURE__*/React.createElement(TimelineMonths, null), /*#__PURE__*/React.createElement(TimelineWeeks, null), /*#__PURE__*/React.createElement(TimelineDays, {
    render: function render(_ref9) {
      var dayWidth = _ref9.dayWidth,
        date = _ref9.date;
      return /*#__PURE__*/React.createElement(StyledCustomTimelineDays, {
        dayWidth: dayWidth
      }, format(date, 'dd'));
    }
  }), /*#__PURE__*/React.createElement(TimelineRows, null));
};
WithCustomDays.storyName = 'With custom days';
var StyledCustomTimelineHours = styled.div.withConfig({
  displayName: "Timelinestories__StyledCustomTimelineHours",
  componentId: "sc-o0b4j7-3"
})(["display:inline-block;width:", "px;height:2.5rem;background-color:black;color:white;span{font-size:8px;padding-left:5px;}"], function (_ref10) {
  var width = _ref10.width;
  return width;
});
export var WithCustomHours = function WithCustomHours(props) {
  return /*#__PURE__*/React.createElement(Timeline, _extends({}, props, {
    hasSide: true,
    startDate: new Date(2020, 3, 1),
    today: new Date(2020, 3, 15)
  }), /*#__PURE__*/React.createElement(TimelineTodayMarker, null), /*#__PURE__*/React.createElement(TimelineMonths, null), /*#__PURE__*/React.createElement(TimelineWeeks, null), /*#__PURE__*/React.createElement(TimelineDays, null), /*#__PURE__*/React.createElement(TimelineHours, {
    render: function render(_ref11) {
      var width = _ref11.width,
        time = _ref11.time;
      return /*#__PURE__*/React.createElement(StyledCustomTimelineHours, {
        width: width
      }, /*#__PURE__*/React.createElement("span", null, time));
    }
  }), /*#__PURE__*/React.createElement(TimelineRows, null));
};
WithCustomHours.storyName = 'With custom hours';
var StyledCustomTodayMarker = styled.span.withConfig({
  displayName: "Timelinestories__StyledCustomTodayMarker",
  componentId: "sc-o0b4j7-4"
})(["position:absolute;left:", ";height:100vh;width:2px;background:black;overflow:visible;font-size:", ";white-space:nowrap;text-indent:1rem;z-index:1;"], function (_ref12) {
  var offset = _ref12.offset;
  return offset;
}, fontSize('s'));
export var WithCustomTodayMarker = function WithCustomTodayMarker(props) {
  return /*#__PURE__*/React.createElement(Timeline, _extends({}, props, {
    hasSide: true,
    startDate: new Date(2020, 3, 1),
    today: new Date(2020, 3, 15)
  }), /*#__PURE__*/React.createElement(TimelineTodayMarker, {
    render: function render(_ref13) {
      var offset = _ref13.offset,
        today = _ref13.today;
      return /*#__PURE__*/React.createElement(StyledCustomTodayMarker, {
        offset: offset
      }, today.toUTCString());
    }
  }), /*#__PURE__*/React.createElement(TimelineMonths, null), /*#__PURE__*/React.createElement(TimelineWeeks, null), /*#__PURE__*/React.createElement(TimelineDays, null), /*#__PURE__*/React.createElement(TimelineRows, null));
};
WithCustomTodayMarker.storyName = 'With custom today marker';
var StyledCustomTimelineColumn = styled.div.withConfig({
  displayName: "Timelinestories__StyledCustomTimelineColumn",
  componentId: "sc-o0b4j7-5"
})(["display:inline-block;width:", ";margin-left:", ";background-color:", ";height:100vh;"], function (_ref14) {
  var widthPx = _ref14.widthPx;
  return widthPx;
}, function (_ref15) {
  var offsetPx = _ref15.offsetPx;
  return offsetPx;
}, function (_ref16) {
  var isOddNumber = _ref16.isOddNumber;
  return isOddNumber ? 'black' : 'white';
});
export var WithCustomColumns = function WithCustomColumns(props) {
  return /*#__PURE__*/React.createElement(Timeline, _extends({}, props, {
    hasSide: true,
    startDate: new Date(2020, 3, 1),
    today: new Date(2020, 3, 15)
  }), /*#__PURE__*/React.createElement(TimelineTodayMarker, null), /*#__PURE__*/React.createElement(TimelineMonths, null), /*#__PURE__*/React.createElement(TimelineWeeks, null), /*#__PURE__*/React.createElement(TimelineDays, null), /*#__PURE__*/React.createElement(TimelineRows, {
    render: function render(_ref17) {
      var isOddNumber = _ref17.isOddNumber,
        offsetPx = _ref17.offsetPx,
        widthPx = _ref17.widthPx;
      return /*#__PURE__*/React.createElement(StyledCustomTimelineColumn, {
        isOddNumber: isOddNumber,
        offsetPx: offsetPx,
        widthPx: widthPx
      });
    }
  }, /*#__PURE__*/React.createElement(TimelineRow, {
    name: "Row 1"
  }, /*#__PURE__*/React.createElement(TimelineEvents, null, /*#__PURE__*/React.createElement(TimelineEvent, {
    startDate: new Date(2020, 3, 14),
    endDate: new Date(2020, 3, 18)
  }, "Event 1"))), /*#__PURE__*/React.createElement(TimelineRow, {
    name: "Row 2"
  }, /*#__PURE__*/React.createElement(TimelineEvents, null, /*#__PURE__*/React.createElement(TimelineEvent, {
    startDate: new Date(2020, 3, 3),
    endDate: new Date(2020, 3, 8)
  }, "Event 2")))));
};
WithCustomColumns.storyName = 'With custom columns';
export var WithCustomRowCss = function WithCustomRowCss(props) {
  var rowCss = css(["height:40px;"]);
  var rowContentProps = {
    css: css(["background-color:", ";"], ColorNeutral100)
  };
  var rowHeaderProps = {
    css: css(["background-color:", ";"], ColorNeutral200)
  };
  return /*#__PURE__*/React.createElement(Timeline, _extends({}, props, {
    hasSide: true,
    startDate: new Date(2020, 3, 1),
    endDate: new Date(2020, 4, 30),
    today: new Date(2020, 3, 15)
  }), /*#__PURE__*/React.createElement(TimelineTodayMarker, null), /*#__PURE__*/React.createElement(TimelineMonths, null), /*#__PURE__*/React.createElement(TimelineWeeks, null), /*#__PURE__*/React.createElement(TimelineDays, null), /*#__PURE__*/React.createElement(TimelineRows, null, /*#__PURE__*/React.createElement(_StyledTimelineRow, {
    contentProps: rowContentProps,
    headerProps: rowHeaderProps,
    name: "Row 1",
    render: function render() {
      return /*#__PURE__*/React.createElement("span", null, "Row with custom style");
    },
    $_css: rowCss
  }, /*#__PURE__*/React.createElement(TimelineEvents, null, /*#__PURE__*/React.createElement(TimelineEvent, {
    startDate: new Date(2020, 2, 14),
    endDate: new Date(2020, 3, 18)
  }, "Event 1")))));
};
WithCustomRowCss.storyName = 'With custom row CSS';
export var WithCustomEventBarColor = function WithCustomEventBarColor(props) {
  return /*#__PURE__*/React.createElement(Timeline, _extends({}, props, {
    hasSide: true,
    startDate: new Date(2020, 3, 1),
    today: new Date(2020, 3, 15)
  }), /*#__PURE__*/React.createElement(TimelineTodayMarker, null), /*#__PURE__*/React.createElement(TimelineMonths, null), /*#__PURE__*/React.createElement(TimelineWeeks, null), /*#__PURE__*/React.createElement(TimelineDays, null), /*#__PURE__*/React.createElement(TimelineRows, null, /*#__PURE__*/React.createElement(TimelineRow, {
    name: "Row 1"
  }, /*#__PURE__*/React.createElement(TimelineEvents, null, /*#__PURE__*/React.createElement(TimelineEvent, {
    barColor: ColorDanger500,
    startDate: new Date(2020, 3, 14),
    endDate: new Date(2020, 3, 18)
  }, "Event 1")))));
};
WithCustomEventBarColor.storyName = 'With custom event bar color';
var StyledCustomEvent = styled.div.withConfig({
  displayName: "Timelinestories__StyledCustomEvent",
  componentId: "sc-o0b4j7-6"
})(["position:absolute;top:50%;transform:translateY(-50%);background-color:black;color:white;margin-left:", ";width:", ";"], function (_ref18) {
  var offsetPx = _ref18.offsetPx;
  return offsetPx;
}, function (_ref19) {
  var widthPx = _ref19.widthPx;
  return widthPx;
});
export var WithCustomEventContent = function WithCustomEventContent(props) {
  return /*#__PURE__*/React.createElement(Timeline, _extends({}, props, {
    hasSide: true,
    startDate: new Date(2020, 3, 1),
    today: new Date(2020, 3, 15)
  }), /*#__PURE__*/React.createElement(TimelineTodayMarker, null), /*#__PURE__*/React.createElement(TimelineMonths, null), /*#__PURE__*/React.createElement(TimelineWeeks, null), /*#__PURE__*/React.createElement(TimelineDays, null), /*#__PURE__*/React.createElement(TimelineRows, null, /*#__PURE__*/React.createElement(TimelineRow, {
    name: "Row 1"
  }, /*#__PURE__*/React.createElement(TimelineEvents, null, /*#__PURE__*/React.createElement(TimelineEvent, {
    startDate: new Date(2020, 3, 6),
    endDate: new Date(2020, 3, 10),
    render: function render(_ref20) {
      var startDate = _ref20.startDate,
        endDate = _ref20.endDate,
        widthPx = _ref20.widthPx,
        offsetPx = _ref20.offsetPx;
      return /*#__PURE__*/React.createElement(StyledCustomEvent, {
        startDate: startDate,
        endDate: endDate,
        widthPx: widthPx,
        offsetPx: offsetPx
      }, "Event 1");
    }
  }), /*#__PURE__*/React.createElement(TimelineEvent, {
    startDate: new Date(2020, 3, 16),
    endDate: new Date(2020, 3, 20),
    render: function render(_ref21) {
      var startDate = _ref21.startDate,
        endDate = _ref21.endDate,
        widthPx = _ref21.widthPx,
        offsetPx = _ref21.offsetPx;
      return /*#__PURE__*/React.createElement(StyledCustomEvent, {
        startDate: startDate,
        endDate: endDate,
        widthPx: widthPx,
        offsetPx: offsetPx
      }, "Event 2");
    }
  }))), /*#__PURE__*/React.createElement(TimelineRow, {
    name: "Row 2"
  }, /*#__PURE__*/React.createElement(TimelineEvents, null, /*#__PURE__*/React.createElement(TimelineEvent, {
    startDate: new Date(2020, 3, 15),
    endDate: new Date(2020, 3, 19)
  }, "Event 3"), /*#__PURE__*/React.createElement(TimelineEvent, {
    startDate: new Date(2020, 3, 22),
    endDate: new Date(2020, 3, 24)
  }, "Event 4")))));
};
WithCustomEventContent.storyName = 'With custom event content';
export var WithCustomDayWidth = function WithCustomDayWidth(props) {
  return /*#__PURE__*/React.createElement(Timeline, _extends({}, props, {
    hasSide: true,
    startDate: new Date(2020, 3, 1),
    today: new Date(2020, 3, 15),
    unitWidth: 75
  }), /*#__PURE__*/React.createElement(TimelineTodayMarker, null), /*#__PURE__*/React.createElement(TimelineMonths, null), /*#__PURE__*/React.createElement(TimelineWeeks, null), /*#__PURE__*/React.createElement(TimelineDays, null), /*#__PURE__*/React.createElement(TimelineRows, null, /*#__PURE__*/React.createElement(TimelineRow, {
    name: "Row 1"
  }, /*#__PURE__*/React.createElement(TimelineEvents, null, /*#__PURE__*/React.createElement(TimelineEvent, {
    startDate: new Date(2020, 3, 25),
    endDate: new Date(2020, 3, 28)
  }, "Event 2"))), /*#__PURE__*/React.createElement(TimelineRow, {
    name: "Row 2"
  }, /*#__PURE__*/React.createElement(TimelineEvents, null, /*#__PURE__*/React.createElement(TimelineEvent, {
    startDate: new Date(2020, 3, 22),
    endDate: new Date(2020, 3, 24)
  }, "Event 4")))));
};
WithCustomDayWidth.storyName = 'With custom day width';
export var WithCustomRange = function WithCustomRange(props) {
  return /*#__PURE__*/React.createElement(Timeline, _extends({}, props, {
    hasSide: true,
    startDate: new Date(2020, 3, 1),
    today: new Date(2020, 3, 15),
    range: 6
  }), /*#__PURE__*/React.createElement(TimelineTodayMarker, null), /*#__PURE__*/React.createElement(TimelineMonths, null), /*#__PURE__*/React.createElement(TimelineWeeks, null), /*#__PURE__*/React.createElement(TimelineDays, null), /*#__PURE__*/React.createElement(TimelineRows, null, /*#__PURE__*/React.createElement(TimelineRow, {
    name: "Row 1"
  }, /*#__PURE__*/React.createElement(TimelineEvents, null, /*#__PURE__*/React.createElement(TimelineEvent, {
    startDate: new Date(2020, 3, 25),
    endDate: new Date(2020, 3, 28)
  }, "Event 2"))), /*#__PURE__*/React.createElement(TimelineRow, {
    name: "Row 2"
  }, /*#__PURE__*/React.createElement(TimelineEvents, null, /*#__PURE__*/React.createElement(TimelineEvent, {
    startDate: new Date(2020, 3, 22),
    endDate: new Date(2020, 3, 24)
  }, "Event 4")))));
};
WithCustomRange.storyName = 'With custom range';
export var NoVisibleCells = function NoVisibleCells(props) {
  return /*#__PURE__*/React.createElement(Timeline, _extends({}, props, {
    startDate: new Date(2020, 0, 1),
    today: new Date(2020, 0, 1, 12)
  }), /*#__PURE__*/React.createElement(TimelineTodayMarker, null), /*#__PURE__*/React.createElement(TimelineMonths, null), /*#__PURE__*/React.createElement(TimelineWeeks, null), /*#__PURE__*/React.createElement(TimelineDays, null), /*#__PURE__*/React.createElement(TimelineRows, null, /*#__PURE__*/React.createElement(TimelineRow, {
    name: "Row 1"
  }, /*#__PURE__*/React.createElement(TimelineEvents, null, /*#__PURE__*/React.createElement(TimelineEvent, {
    startDate: new Date(2020, 3, 14, 12),
    endDate: new Date(2020, 3, 18, 12)
  }, "Event 1")))));
};
NoVisibleCells.storyName = 'No visible cells';
export var HiddenToolbar = function HiddenToolbar(props) {
  return /*#__PURE__*/React.createElement(Timeline, _extends({}, props, {
    hideToolbar: true,
    startDate: new Date(2020, 9, 1),
    today: new Date(2020, 9, 15, 12)
  }), /*#__PURE__*/React.createElement(TimelineTodayMarker, null), /*#__PURE__*/React.createElement(TimelineMonths, null), /*#__PURE__*/React.createElement(TimelineWeeks, null), /*#__PURE__*/React.createElement(TimelineDays, null), /*#__PURE__*/React.createElement(TimelineRows, null, /*#__PURE__*/React.createElement(TimelineRow, {
    name: "Row 1"
  }, /*#__PURE__*/React.createElement(TimelineEvents, null, /*#__PURE__*/React.createElement(TimelineEvent, {
    startDate: new Date(2020, 9, 14, 12),
    endDate: new Date(2020, 9, 18, 12)
  }, "Event 1"))), /*#__PURE__*/React.createElement(TimelineRow, {
    name: "Row 2"
  }, /*#__PURE__*/React.createElement(TimelineEvents, null, /*#__PURE__*/React.createElement(TimelineEvent, {
    startDate: new Date(2020, 9, 3),
    endDate: new Date(2020, 9, 8)
  }, "Event 2")))));
};
HiddenToolbar.storyName = 'Hidden toolbar';
export var HiddenScaling = function HiddenScaling(props) {
  return /*#__PURE__*/React.createElement(Timeline, _extends({}, props, {
    hideScaling: true,
    startDate: new Date(2020, 9, 1),
    today: new Date(2020, 9, 15, 12)
  }), /*#__PURE__*/React.createElement(TimelineTodayMarker, null), /*#__PURE__*/React.createElement(TimelineMonths, null), /*#__PURE__*/React.createElement(TimelineWeeks, null), /*#__PURE__*/React.createElement(TimelineDays, null), /*#__PURE__*/React.createElement(TimelineRows, null, /*#__PURE__*/React.createElement(TimelineRow, {
    name: "Row 1"
  }, /*#__PURE__*/React.createElement(TimelineEvents, null, /*#__PURE__*/React.createElement(TimelineEvent, {
    startDate: new Date(2020, 9, 14, 12),
    endDate: new Date(2020, 9, 18, 12)
  }, "Event 1"))), /*#__PURE__*/React.createElement(TimelineRow, {
    name: "Row 2"
  }, /*#__PURE__*/React.createElement(TimelineEvents, null, /*#__PURE__*/React.createElement(TimelineEvent, {
    startDate: new Date(2020, 9, 3),
    endDate: new Date(2020, 9, 8)
  }, "Event 2")))));
};
HiddenScaling.storyName = 'Hidden scaling';
export var FullWidth = function FullWidth() {
  return /*#__PURE__*/React.createElement(Timeline, {
    isFullWidth: true,
    startDate: new Date(2020, 9, 1),
    today: new Date(2020, 9, 15, 12)
  }, /*#__PURE__*/React.createElement(TimelineTodayMarker, null), /*#__PURE__*/React.createElement(TimelineMonths, null), /*#__PURE__*/React.createElement(TimelineWeeks, null), /*#__PURE__*/React.createElement(TimelineDays, null), /*#__PURE__*/React.createElement(TimelineHours, null), /*#__PURE__*/React.createElement(TimelineRows, null, /*#__PURE__*/React.createElement(TimelineRow, {
    name: "Row 1"
  }, /*#__PURE__*/React.createElement(TimelineEvents, null, /*#__PURE__*/React.createElement(TimelineEvent, {
    startDate: new Date(2020, 9, 14, 12),
    endDate: new Date(2020, 9, 18, 12)
  }, "Event 1"))), /*#__PURE__*/React.createElement(TimelineRow, {
    name: "Row 2"
  }, /*#__PURE__*/React.createElement(TimelineEvents, null, /*#__PURE__*/React.createElement(TimelineEvent, {
    startDate: new Date(2020, 9, 3),
    endDate: new Date(2020, 9, 8)
  }, "Event 2")))));
};
FullWidth.storyName = 'Full width';
var _StyledTimelineRow = styled(TimelineRow).withConfig({
  displayName: "Timelinestories___StyledTimelineRow",
  componentId: "sc-o0b4j7-7"
})(["", ""], function (p) {
  return p.$_css;
});