Origami Newsletter, January 2023
TL;DR:
Origami has more team members; Storybook templates; More accessibility improvements; New CLI tool to create new components.
Top things
Some of the bigger Origami news since our last update:
Origami has more team members
The Origami team is very happy that we have new team members joining. Ben Freshwater joined as a full-time S1 developer. Rhys Evans is helping Origami as a part-time product owner.
Storybook templates
Origami has been thinking about adopting a tool for documenting and making interactive component demos. So last year Origami started writing TSX templates for existing components. Which gets integrated into our Storybook demos. This approach will also support designers to work closer with the Origami team and will enable other developers to have a better demo experience.
NOTE: This is still a work in progress and not every component has a TSX template, but play around with the ones that we already published. Also if you think we should prioritise some components get in touch with us or join us during our office hours.
More accessibility improvements
In December Origami dedicated its energy to closing as many accessibility issues as possible following the DAC audit. In this successful endeavour, we managed to close 38 issues out of 40. The remaining two are in progress.
The most notable change was related to focus styles. We published a blog about this if you want to have deeper dive into it, but in short, focus rings are black and white shadows around the focusable elements.
Summer 2022 Origami rebuilt a CLI tool to make it easier for other developers to create new components. To create new components run npm run create-component from the root folder and it will guide you through the new component creation process and will generate template files and even some default code to get started with.
NOTE: Since Origami is trying to migrate existing components to TSX templates, as mentioned above, we decided to make this even easier and at the moment the CLI tool also supports a command npm run create-component storybook that should help you to generate all the files needed to start building a TSX template for existing components.
Special Thanks
Special thanks, in last quarter, goes to Orhan Bakir and Andy Little for helping Origami to write a TSX template for o-forms. It was a very big component and thanks both of you for your contribution.
Broader update
A digest list of some other things that have happened in January:
-
o-forms: has TSX templates and a storybook demo.
-
o-header: Origami stopped supporting subbrand variants, since they are not in use anymore, in o-header component. We also published TSX templates for the o-header component. The drawer component has improved accessibility and it traps focus within the drawer.
-
o-share: is version 9 now. The accessibility has improved and o-share no longer provides client-side JavaScript to generate markup. Instead, users will need to write the full markup. To address some accessibility issues o-share now uses inline SVGs for icons.
-
o-ft-affiliate-ribbon: now has storybook demo and TSX templates are also published to NPM.
-
o-colors: only warns users of colour deprecations via Sass when they explicitly request a colour or colour use-case, reducing noise so engineers can focus on true issues.
-
o-editorial-layout: has TSX templates and a storybook demo.
-
o-big-number: We published TSX template to NPM packages.
-
o-normalise: updated to match FT browser policy and deprecate code supporting IE.
-
o-comments: got migrated to Coral V7.
-
o-topper: We supported the dynamic storytelling team to release two new toppers for articles: Deep Landscape and Deep Portrait, as featured in the recent product release announcement. Shout out to Alberto Cubero, Juan Sanchez, and Phil Hunt for their work on the o-topper Origami component!
-
o-video: Thanks to Juan Sanchez for contributing to o-video component that now tracks that progress of video playback at 99%, since 100% is not sent by Chrome.
