Proposal: Bring n-myft-ui components into Origami

[KamranMuniree]

🚧 work in progress proposal

Teams to talk to:

• content innovation (own n-myft-ui)
• platforms (own x-dash)
• accounts (working on newsletter page)
• design systems guild (add components to Figma UI Kit)

Summary

Create Origami components for all n-myft-ui components (demo), starting with the follow button. Include jsx templates in the Origami components, but include only UI logic and avoid tying the UI to business logic. Move business logic to x-dash.

Motivation

• Improve design consistency
• Reduce repeated/duplicated work
• Improve design documentation and visibility

Teams are reluctant to depend on n-myft-ui which comes with inconsistencies and technical debt. For example x-follow-button duplicates Sass/templates to avoid the dependency and the accounts team have asked for an Origami implementation of the follow button, because they don't want to depend on n-myft-ui and x-follow-button includes a template with logic which doesn't suit their specific need.

Creating n-myft-ui components in Origami, with jsx templates, will allow teams to use the components consistently without depending on n-myft-ui or being tied to certain business logic - e.g. the follow button could be to follow a concept, sign up to a newsletter, and it could potentially work with different backends, etc.

Another benefit is that components would show in the Origami registry, versioned, with usual documentation / tools / workflow.

Finally it would allow other Origami components to depend on myft ui, for example to include follow buttons within o-topper.

Work Required

• Create an Origami component for each n-myft-ui component.
  • Origami components to include public JSX templates
  • Origami components should not be tied to business logic
  • Should the follow button be in o-buttons?
• Wrap Origami component with n-myft-ui business logic in x-dash
• Talk to the design team to add the components to the Figma UI Kit

Notes

Aside: See recent chat between accounts and content discovery team about myft architecture https://financialtimes.slack.com/archives/C3LRB6JCE/p1642764059153900

Related issue: Add myFT follow button to Origami.