feat: update o-teaser to use date-fns version 2

[benwallman]

Describe your changes

Currently o-teaser uses date-fns version 1. This functionally is fine, however v1 has bad tree shaking capabilities. This means and repository using o-teaser on the front end has a significantly larger bundle size. In next-article, date-fns is responsible for around 1/6th of the JS we ship to the browser.

By updating to version 2, this allows tree shaking and other nice things. The v1 -> v2 change was mostly around types, removing default support for strings in date-fns methods.

This change was pretty hard to test, as I couldn't see examples of testing React components in Origami. I messed around with Storybook to verify it, but if anyone is able to help me write some tests that would be fantastic!

Here's the screenshots of it working (required me to override component props in Storybook, which I didn't commit)

Issue ticket number and link

https://financialtimes.atlassian.net/browse/CPREL-852

Link to Figma designs

Checklist before requesting a review

• I have applied percy label on my PR before merging and after review.
• If it is a new feature, I have added thorough tests.
• I have updated relevant docs.

[akomiqaia]

Hi @benwallman. Sorry for the delayed reply. Thank you for your PR everything looks good to me and we are happy to merge this PR but there are some important things to mention. These TSX templates are not in use and your changes might not have an effect. What you might be looking for is x-teaser. x-teaser is a customer products wrapper on o-teaser but does not use TSX templates.

[benwallman]

Thanks @akomiqaia !

My path of fixing this had led me to this being the root module, then x-dash, then cp-content-pipeline and finally next-article!

Will still like this merged, to stop future date-fns v1 usage, but this makes it one step easier thank you :)

[benwallman]

Actually @akomiqaia I've double checked my working and I'm a bit confused!

https://www.npmjs.com/package/@financial-times/cp-content-pipeline-ui

https://github.com/Financial-Times/next-article/blob/main/package.json#L86

To me it looks like it's being used, can you clarify?

[akomiqaia]

hi @benwallman. Origami is used to create components using only JS and SCSS. Last year we started writing TSX templates to make life easier for TSX users. o-teaser was one of the components that got a new TSX template but it was hard to implement this in x-teaser and o-teaser TSX templates were never used. I think what is happening here is that o-teaser is used to get styles working but then actual Teaser markup is brought in from x-dash.

[benwallman]

Thanks @akomiqaia makes sense to me!

Would be good to get the merged in if possible, primarily to stop the legacy-peer-deps warning and faster build tiimes!