import React from 'react';
import { IntlProvider } from 'react-intl';
import { Box, Icon } from '../..';
import Timeline from './Timeline';
export default {
  title: 'Molecules / Timeline',
  parameters: {
    component: Timeline
  }
};
export var Default = function Default() {
  return React.createElement(IntlProvider, {
    locale: "en"
  }, React.createElement(Box, {
    px: 10
  }, React.createElement(Timeline, {
    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'
    }]
  })));
};
export var DefaultWithHiddenSeparators = function DefaultWithHiddenSeparators() {
  return React.createElement(IntlProvider, {
    locale: "en"
  }, React.createElement(Box, {
    px: 10
  }, React.createElement(Timeline, {
    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'
    }]
  })));
};
export var DefaultWithNoDates = function DefaultWithNoDates() {
  return React.createElement(IntlProvider, {
    locale: "en"
  }, React.createElement(Box, {
    px: 10
  }, React.createElement(Timeline, {
    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'
    }]
  })));
};
export var WithCustomIcons = function WithCustomIcons() {
  return React.createElement(IntlProvider, {
    locale: "en"
  }, React.createElement(Box, {
    px: 10
  }, React.createElement(Timeline, {
    steps: [{
      text: 'Newer Newest and Bigger! (Status: not provided)',
      date: new Date(2020, 6, 3),
      icon: React.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.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.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.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.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.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.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.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.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.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.createElement(Icon.WarningFill24, {
        color: function color(t) {
          return t.color.timelineNext;
        }
      })
    }]
  })));
};
export var WithCustomIconsAndLineColors = function WithCustomIconsAndLineColors() {
  return React.createElement(IntlProvider, {
    locale: "en"
  }, React.createElement(Box, {
    px: 10
  }, React.createElement(Timeline, {
    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.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.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.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.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.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.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.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.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.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.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.createElement(Icon.WarningFill24, {
        color: function color(t) {
          return t.color.timelineNext;
        }
      })
    }]
  })));
};
export var WithCustomIconsThatDontQuiteFit = function WithCustomIconsThatDontQuiteFit() {
  return React.createElement(IntlProvider, {
    locale: "en"
  }, React.createElement(Box, {
    px: 10
  }, React.createElement(Timeline, {
    steps: [{
      text: 'Horizontal lines: no bueno',
      date: new Date(2020, 6, 3),
      status: 'PENDING',
      icon: React.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.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.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.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.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.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.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.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.createElement(Icon.ExternalLink24, {
        color: function color(t) {
          return t.color.timelineNext;
        }
      })
    }]
  })));
};
export var SingleElement = function SingleElement() {
  return React.createElement(IntlProvider, {
    locale: "en"
  }, React.createElement(Box, {
    px: 10
  }, React.createElement(Timeline, {
    steps: [{
      text: 'Single element. So lonely 😭',
      date: new Date(2020, 6, 3)
    }]
  })));
};
export var DifferentHeights = function DifferentHeights() {
  return React.createElement(IntlProvider, {
    locale: "en"
  }, React.createElement(Box, {
    px: 10
  }, React.createElement(Timeline, {
    steps: [{
      text: React.createElement(Box, {
        py: 3
      }, "Newest"),
      date: new Date(2020, 6, 3)
    }, {
      text: 'Kinda new',
      date: new Date(2020, 3, 1)
    }, {
      text: React.createElement(Box, {
        py: 4
      }, "Kinda old"),
      date: new Date(2020, 1, 1),
      status: 'FAILURE'
    }, {
      text: React.createElement(Box, {
        py: 10
      }, "Oldest"),
      date: new Date(2020, 0, 1),
      status: 'ACTIVE'
    }]
  })));
};
export var WithButton = function WithButton() {
  var button = {
    label: 'Click me',
    onClick: function onClick() {
      return alert('Tihi that tickles');
    }
  };
  return React.createElement(IntlProvider, {
    locale: "en"
  }, React.createElement(Box, {
    px: 10
  }, React.createElement(Timeline, {
    steps: [{
      text: 'Newest',
      date: new Date(2020, 6, 3)
    }, {
      text: 'Old',
      date: new Date(2020, 5, 1),
      status: 'ACTIVE',
      button: button
    }]
  })));
};