"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.WithCustomIconsThatDontQuiteFit = exports.WithCustomIconsAndLineColors = exports.WithCustomIcons = exports.WithButton = exports.SingleElement = exports.DifferentHeights = exports.DefaultWithNoDates = exports.DefaultWithHiddenSeparators = exports.Default = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactIntl = require("react-intl");
var _ = require("../..");
var _Timeline = _interopRequireDefault(require("./Timeline"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var _default = exports.default = {
  title: 'Molecules / Timeline',
  parameters: {
    component: _Timeline.default
  }
};
var Default = exports.Default = function Default() {
  return _react.default.createElement(_reactIntl.IntlProvider, {
    locale: "en"
  }, _react.default.createElement(_.Box, {
    px: 10
  }, _react.default.createElement(_Timeline.default, {
    steps: [{
      text: 'Newer Newest (Status: not provided)',
      date: new Date(2020, 6, 3)
    }, {
      text: 'Newest (Status: SUCCESS)',
      date: new Date(2020, 6, 3)
    }, {
      text: 'Kinda new (Status: FAILURE)',
      date: new Date(2020, 3, 1),
      status: 'FAILURE'
    }, {
      text: 'Feedback needed (Status: WARNING)',
      date: new Date(2020, 3, 1),
      status: 'WARNING'
    }, {
      text: 'Old (Status: ACTIVE)',
      date: new Date(2020, 2, 1),
      status: 'ACTIVE'
    }, {
      text: 'Waiting for information (Status: PENDING)',
      date: new Date(2020, 2, 1),
      status: 'PENDING'
    }, {
      text: 'Nothing (Status: NEUTRAL)',
      date: new Date(2020, 1, 1),
      status: 'NEUTRAL'
    }]
  })));
};
var DefaultWithHiddenSeparators = exports.DefaultWithHiddenSeparators = function DefaultWithHiddenSeparators() {
  return _react.default.createElement(_reactIntl.IntlProvider, {
    locale: "en"
  }, _react.default.createElement(_.Box, {
    px: 10
  }, _react.default.createElement(_Timeline.default, {
    hideSeparators: true,
    steps: [{
      text: 'Newer Newest (Status: not provided)',
      date: new Date(2020, 6, 3)
    }, {
      text: 'Newest (Status: SUCCESS)',
      date: new Date(2020, 6, 3)
    }, {
      text: 'Kinda new (Status: FAILURE)',
      date: new Date(2020, 3, 1),
      status: 'FAILURE'
    }, {
      text: 'Feedback needed (Status: WARNING)',
      date: new Date(2020, 3, 1),
      status: 'WARNING'
    }, {
      text: 'Old (Status: ACTIVE)',
      date: new Date(2020, 2, 1),
      status: 'ACTIVE'
    }, {
      text: 'Waiting for information (Status: PENDING)',
      date: new Date(2020, 2, 1),
      status: 'PENDING'
    }, {
      text: 'Nothing (Status: NEUTRAL)',
      date: new Date(2020, 1, 1),
      status: 'NEUTRAL'
    }]
  })));
};
var DefaultWithNoDates = exports.DefaultWithNoDates = function DefaultWithNoDates() {
  return _react.default.createElement(_reactIntl.IntlProvider, {
    locale: "en"
  }, _react.default.createElement(_.Box, {
    px: 10
  }, _react.default.createElement(_Timeline.default, {
    steps: [{
      text: 'Newer Newest (Status: not provided)'
    }, {
      text: 'Newest (Status: SUCCESS)'
    }, {
      text: 'Kinda new (Status: FAILURE)',
      status: 'FAILURE'
    }, {
      text: 'Feedback needed (Status: WARNING)',
      status: 'WARNING'
    }, {
      text: 'Old (Status: ACTIVE)',
      status: 'ACTIVE'
    }, {
      text: 'Waiting for information (Status: PENDING)',
      status: 'PENDING'
    }, {
      text: 'Nothing (Status: NEUTRAL)',
      status: 'NEUTRAL'
    }]
  })));
};
var WithCustomIcons = exports.WithCustomIcons = function WithCustomIcons() {
  return _react.default.createElement(_reactIntl.IntlProvider, {
    locale: "en"
  }, _react.default.createElement(_.Box, {
    px: 10
  }, _react.default.createElement(_Timeline.default, {
    steps: [{
      text: 'Newer Newest and Bigger! (Status: not provided)',
      date: new Date(2020, 6, 3),
      icon: _react.default.createElement(_.Icon.RecommendedFill32, {
        color: function color(t) {
          return t.color.positive;
        }
      })
    }, {
      text: 'Newer Newest (Status: SUCCESS)',
      date: new Date(2020, 6, 3),
      status: 'SUCCESS',
      icon: _react.default.createElement(_.Icon.RecommendedFill24, {
        color: function color(t) {
          return t.color.positive;
        }
      })
    }, {
      text: 'Kinda newer (Status: FAILURE)',
      date: new Date(2020, 3, 1),
      status: 'FAILURE',
      icon: _react.default.createElement(_.Icon.SubtractCircleFill24, {
        color: function color(t) {
          return t.color.negative;
        }
      })
    }, {
      text: 'Warning no fill (Size 32) (Status: WARNING)',
      date: new Date(2020, 2, 1),
      status: 'WARNING',
      icon: _react.default.createElement(_.Icon.Warning32, {
        color: function color(t) {
          return t.color.warning;
        }
      })
    }, {
      text: 'Warning no fill (Size 24) (Status: WARNING)',
      date: new Date(2020, 2, 1),
      status: 'WARNING',
      icon: _react.default.createElement(_.Icon.Warning24, {
        color: function color(t) {
          return t.color.warning;
        }
      })
    }, {
      text: 'Warning no fill (Size 16) (Status: WARNING)',
      date: new Date(2020, 2, 1),
      status: 'WARNING',
      icon: _react.default.createElement(_.Icon.Warning16, {
        color: function color(t) {
          return t.color.warning;
        }
      })
    }, {
      text: 'Not so old (Status: ACTIVE)',
      date: new Date(2020, 2, 1),
      status: 'ACTIVE',
      icon: _react.default.createElement(_.Icon.HelpFill24, {
        color: function color(t) {
          return t.color.barScaleActiveBar;
        }
      })
    }, {
      text: 'Waiting for information... IN STYLE (Icon size 16) (Status: PENDING)',
      date: new Date(2020, 2, 1),
      status: 'PENDING',
      icon: _react.default.createElement(_.Icon.ClockFill16, {
        color: function color(t) {
          return t.color.cta;
        }
      })
    }, {
      text: 'Waiting for information... IN STYLE (Icon size 24) (Status: PENDING)',
      date: new Date(2020, 2, 1),
      status: 'PENDING',
      icon: _react.default.createElement(_.Icon.ClockFill24, {
        color: function color(t) {
          return t.color.cta;
        }
      })
    }, {
      text: 'Waiting for information... IN STYLE (Icon size 32) (Status: PENDING)',
      date: new Date(2020, 2, 1),
      status: 'PENDING',
      icon: _react.default.createElement(_.Icon.ClockFill32, {
        color: function color(t) {
          return t.color.cta;
        }
      })
    }, {
      text: 'Nothing has ever looked so slick (Status: NEUTRAL)',
      date: new Date(2020, 1, 1),
      status: 'NEUTRAL',
      icon: _react.default.createElement(_.Icon.WarningFill24, {
        color: function color(t) {
          return t.color.timelineNext;
        }
      })
    }]
  })));
};
var WithCustomIconsAndLineColors = exports.WithCustomIconsAndLineColors = function WithCustomIconsAndLineColors() {
  return _react.default.createElement(_reactIntl.IntlProvider, {
    locale: "en"
  }, _react.default.createElement(_.Box, {
    px: 10
  }, _react.default.createElement(_Timeline.default, {
    colorSuccess: function colorSuccess(t) {
      return t.color.positive;
    },
    colorNext: function colorNext(t) {
      return t.color.cta;
    },
    colorFailure: function colorFailure(t) {
      return t.color.negative;
    },
    colorWarning: function colorWarning(t) {
      return t.color.warning;
    },
    steps: [{
      text: 'Newer Newest and Bigger! (Status: not provided)',
      date: new Date(2020, 6, 3),
      icon: _react.default.createElement(_.Icon.RecommendedFill32, {
        color: function color(t) {
          return t.color.positive;
        }
      })
    }, {
      text: 'Newer Newest (Status: SUCCESS)',
      date: new Date(2020, 6, 3),
      status: 'SUCCESS',
      icon: _react.default.createElement(_.Icon.RecommendedFill24, {
        color: function color(t) {
          return t.color.positive;
        }
      })
    }, {
      text: 'Kinda newer (Status: FAILURE)',
      date: new Date(2020, 3, 1),
      status: 'FAILURE',
      icon: _react.default.createElement(_.Icon.SubtractCircleFill24, {
        color: function color(t) {
          return t.color.negative;
        }
      })
    }, {
      text: 'Warning no fill (Size 32) (Status: WARNING)',
      date: new Date(2020, 2, 1),
      status: 'WARNING',
      icon: _react.default.createElement(_.Icon.Warning32, {
        color: function color(t) {
          return t.color.warning;
        }
      })
    }, {
      text: 'Warning no fill (Size 24) (Status: WARNING)',
      date: new Date(2020, 2, 1),
      status: 'WARNING',
      icon: _react.default.createElement(_.Icon.Warning24, {
        color: function color(t) {
          return t.color.warning;
        }
      })
    }, {
      text: 'Warning no fill (Size 16) (Status: WARNING)',
      date: new Date(2020, 2, 1),
      status: 'WARNING',
      icon: _react.default.createElement(_.Icon.Warning16, {
        color: function color(t) {
          return t.color.warning;
        }
      })
    }, {
      text: 'Not so old (Status: ACTIVE)',
      date: new Date(2020, 2, 1),
      status: 'ACTIVE',
      icon: _react.default.createElement(_.Icon.HelpFill24, {
        color: function color(t) {
          return t.color.barScaleActiveBar;
        }
      })
    }, {
      text: 'Waiting for information... IN STYLE (Icon size 16) (Status: PENDING)',
      date: new Date(2020, 2, 1),
      status: 'PENDING',
      icon: _react.default.createElement(_.Icon.ClockFill16, {
        color: function color(t) {
          return t.color.cta;
        }
      })
    }, {
      text: 'Waiting for information... IN STYLE (Icon size 24) (Status: PENDING)',
      date: new Date(2020, 2, 1),
      status: 'PENDING',
      icon: _react.default.createElement(_.Icon.ClockFill24, {
        color: function color(t) {
          return t.color.cta;
        }
      })
    }, {
      text: 'Waiting for information... IN STYLE (Icon size 32) (Status: PENDING)',
      date: new Date(2020, 2, 1),
      status: 'PENDING',
      icon: _react.default.createElement(_.Icon.ClockFill32, {
        color: function color(t) {
          return t.color.cta;
        }
      })
    }, {
      text: 'Nothing has ever looked so slick (Status: NEUTRAL)',
      date: new Date(2020, 1, 1),
      status: 'NEUTRAL',
      icon: _react.default.createElement(_.Icon.WarningFill24, {
        color: function color(t) {
          return t.color.timelineNext;
        }
      })
    }]
  })));
};
var WithCustomIconsThatDontQuiteFit = exports.WithCustomIconsThatDontQuiteFit = function WithCustomIconsThatDontQuiteFit() {
  return _react.default.createElement(_reactIntl.IntlProvider, {
    locale: "en"
  }, _react.default.createElement(_.Box, {
    px: 10
  }, _react.default.createElement(_Timeline.default, {
    steps: [{
      text: 'Horizontal lines: no bueno',
      date: new Date(2020, 6, 3),
      status: 'PENDING',
      icon: _react.default.createElement(_.Icon.LineGraph24, {
        color: function color(t) {
          return t.color.warning;
        }
      })
    }, {
      text: 'This one quite works, but MAYBE it could use a circle around it?',
      date: new Date(2020, 6, 3),
      status: 'PENDING',
      icon: _react.default.createElement(_.Icon.Dislike16, {
        color: function color(t) {
          return t.color.barScaleActiveBar;
        }
      })
    }, {
      text: "SOME non-filled icons size 32 don't quite fit with the lines",
      date: new Date(2020, 6, 3),
      status: 'WARNING',
      icon: _react.default.createElement(_.Icon.Error32, {
        color: function color(t) {
          return t.color.warning;
        }
      })
    }, {
      text: 'This one "kinda" works, but only from one side',
      date: new Date(2020, 6, 3),
      status: 'SUCCESS',
      icon: _react.default.createElement(_.Icon.ExternalLink24, {
        color: function color(t) {
          return t.color.positive;
        }
      })
    }, {
      text: 'Icons without any border are a miss',
      date: new Date(2020, 3, 1),
      status: 'FAILURE',
      icon: _react.default.createElement(_.Icon.Cross24, {
        color: function color(t) {
          return t.color.negative;
        }
      })
    }, {
      text: "Vertically asymmetrical icons don't present as well either",
      date: new Date(2020, 2, 1),
      status: 'ACTIVE',
      icon: _react.default.createElement(_.Icon.DislikeFill24, {
        color: function color(t) {
          return t.color.barScaleActiveBar;
        }
      })
    }, {
      text: "Vertically asymmetrical icons don't present as well either",
      date: new Date(2020, 2, 1),
      status: 'ACTIVE',
      icon: _react.default.createElement(_.Icon.LikeFill24, {
        color: function color(t) {
          return t.color.barScaleActiveBar;
        }
      })
    }, {
      text: 'Vetically symmetrical but shorter icons look weird',
      date: new Date(2020, 2, 1),
      status: 'PENDING',
      icon: _react.default.createElement(_.Icon.Deposit24, {
        color: function color(t) {
          return t.color.cta;
        }
      })
    }, {
      text: "Some icon shapes just don't fit",
      date: new Date(2020, 1, 1),
      status: 'NEUTRAL',
      icon: _react.default.createElement(_.Icon.ExternalLink24, {
        color: function color(t) {
          return t.color.timelineNext;
        }
      })
    }]
  })));
};
var SingleElement = exports.SingleElement = function SingleElement() {
  return _react.default.createElement(_reactIntl.IntlProvider, {
    locale: "en"
  }, _react.default.createElement(_.Box, {
    px: 10
  }, _react.default.createElement(_Timeline.default, {
    steps: [{
      text: 'Single element. So lonely 😭',
      date: new Date(2020, 6, 3)
    }]
  })));
};
var DifferentHeights = exports.DifferentHeights = function DifferentHeights() {
  return _react.default.createElement(_reactIntl.IntlProvider, {
    locale: "en"
  }, _react.default.createElement(_.Box, {
    px: 10
  }, _react.default.createElement(_Timeline.default, {
    steps: [{
      text: _react.default.createElement(_.Box, {
        py: 3
      }, "Newest"),
      date: new Date(2020, 6, 3)
    }, {
      text: 'Kinda new',
      date: new Date(2020, 3, 1)
    }, {
      text: _react.default.createElement(_.Box, {
        py: 4
      }, "Kinda old"),
      date: new Date(2020, 1, 1),
      status: 'FAILURE'
    }, {
      text: _react.default.createElement(_.Box, {
        py: 10
      }, "Oldest"),
      date: new Date(2020, 0, 1),
      status: 'ACTIVE'
    }]
  })));
};
var WithButton = exports.WithButton = function WithButton() {
  var button = {
    label: 'Click me',
    onClick: function onClick() {
      return alert('Tihi that tickles');
    }
  };
  return _react.default.createElement(_reactIntl.IntlProvider, {
    locale: "en"
  }, _react.default.createElement(_.Box, {
    px: 10
  }, _react.default.createElement(_Timeline.default, {
    steps: [{
      text: 'Newest',
      date: new Date(2020, 6, 3)
    }, {
      text: 'Old',
      date: new Date(2020, 5, 1),
      status: 'ACTIVE',
      button: button
    }]
  })));
};