TL;DR: A new Origami component ft-concept-button (:blobaww:); more accessibility fixes (:blob-hype:); an update on the Bower and Origami Build Service v2 migration (:blobhelp:).
Top things
Some of the bigger Origami news since our last update:
A new component, ft-concept-button
We have a new component, ft-concept-button! ft-concept-button was added to support the Accounts team build the new newsletters signup page. This component represents a number of exciting firsts. Nice work chee đź‘Ź
The first new component to be added to the design team’s Figma UI Library ahead of implementation in Origami – big thanks to Ajai! 💪 We think this workflow is the correct way around. Origami aims to be the reference implementation of our design guidelines.
The first component to be developed from scratch within Storybook.
The first component to release public JSX templates for consuming projects to use.
In case you haven’t seen it already the #accessibility Slack channel is a great place to ask questions and share tips and articles.
If you are thinking about organising an accessibility audit for your project, contact Rich Lewis or Guy Powell in the #accessibility-improvements Slack channel. DAC provide the FT with 10 hours per week for new audits and reviews, they can also provide suggestions for improvements and answer any accessibility related questions.
Update on the Bower and Origami Build Service v2 migration
There are only 3 months left to migrate from Origami Build Service V2 to V3 and migrate from the Bower to npm package manager. Apps which fail to migrate will break in July, a year after our initial announcement.
To learn more about the changes see the original announcement and guides on how to migrate products. We also have a migration tracker you may use to identify whether any of your systems are affected. I’m seeing a lot of projects from FT Core, FT Creative, FT Specialist there 👀 We’re continuing to reach out to teams and offer support, please let us know in the #origami-support Slack channel if you have any questions!
Special Thanks
Special thanks this week goes to Joanna Kao from the data journalism team for her work migrating the g-audio component from Bower to npm, and making a number of other improvements to bring it inline with current Origami standards. Thanks Joanna!
Broader update
A digest list of some other things that have happened recently:
o-tracking: now has an option to always use a queue instead of using the Beacon API, which only works when the device is online. This will allow ft-app to upgrade to the latest version of Origami components. Thank you Charlotte Payne for reviewing, and clearly communicating the apps requirements!
g-audio: has migrated from bower to npm, thanks again Joanna.
o-forms: toggles and standard checkboxes may now include a label and longer description, this was added to support the acquisition team make improvements to consent options on article sign up and register pages; also toggles have been updated with iconography to indicate on/off state; and finally the colour of inverse toggles for dark background has been fixed.
ft-concept-button: as mentioned, we have a new ft-concept-button component! Added to support the Accounts team build the new newsletters signup page.
o-fonts-assets: we’re continuing to work on rolling out variable fonts, so our digital products can have more typographic design choices available – strengthening the FT brand – without hindering performance. We have the commissioned fonts from our type foundry Klim, and are working to verify they work as expected. Watch this space.
o-table: has received a fix which ensures table rows are displayed correctly when a filter is applied more than once.
o-typography: external links no longer display an icon. During the Origami accessibility audit we discovered some people think the icon indicates the link will open in a new window, when in-fact we mean it to indicate an external link. The Government Digital Services (GDS) team came to the same conclusion in their user testing. After discussing with the broader design team we followed GDS and removed the icon entirely from external links.
o-buttons: has a new button type, the ghost button 👻 It’s useful when many buttons are used together, for example rows in a table with repeated action buttons. We’ve also added pagination and button group Storybook stories. The pagination Storybook demo is interactive, much more helpful than our current pagination demo.
o-visual-effects: gets new CSS Custom Properties so Origami Build Service users may match shadow styles e.g. --o-visual-effects-shadow-high
origami-vscode-extension-pack: Is an extension pack for VSCode to make working with Origami components a smoother experience. It now includes Prettier.
o-header: Now shows the entire focus ring within the drawer, improving accessibility for keyboard users.
o-cookie-message: Now supports a configurable “manage cookies page” url, so non-ft projects can use it.
o-banner: has a number of accessibility improvements, e.g. the close button label is not repeated and it now appears in the navigation tree to allow users of assistive technology to jump straight to the banner.