Skip to content
Origami Design System

Using components (o2) via npm

This guide shows an example of including “o2” Origami components in a project via npm.

”o2” npm packages include Sass and JavaScript, which your project must bundle. Whilst some “o2” packages include TSX templates, most people copy HTML from Storybook.

Knowledge about these and other technologies is assumed. We also assume you’re already setup to bundle assets, e.g. transpile Sass to CSS.

If you have questions or need further help please reach out to the Origami team.

Install npm peer dependencies

Install as peer dependencies to ensure only one version of an Origami package is installed for your project. This is to avoid technical conflicts, ensure consistency of the user experience, and reduce bundle sizes.

E.g.

Terminal window
npm install --save-peer @financial-times/o-colors @financial-times/o-table

Include HTML

Whilst some “o2” packages include TSX templates, most people copy HTML from Storybook.

<table class="o-table o-table--horizontal-lines" data-o-component="o-table">
  <!-- table markup taken from Storybook -->
</table>

Include Sass

  1. Set a $o-brand Sass variable for your project (one of core, internal, or whitelabel).
  2. Set a $system-code Sass variable to the BizOps System Code for your project, or $$$-no-bizops-system-code-$$$ if your project does not relate to a System.
  3. Import the main Sass file of your installed packages.

E.g.

$o-brand: 'core';
$system-code: '$$$-no-bizops-system-code-$$$';
@import '@financial-times/o-colors/main';
@import '@financial-times/o-table/main';

By default, including Origami Sass does not output any CSS. Use the component’s Sass API, documented for each component in Storybook, to output styles.

E.g. To set the page background and output all table styles.

body {
  backgorund-color: oColorsByUsecase('page', 'background');
}
@include oTable();

Include JavaScript

We may then import the component’s client side JavaScript.

E.g. o-table

import oTable from '@financial-times/o-table';

By default this will do nothing until we initialise the table. We can do that in 3 ways, using o-table as an example:

// Initialise all o-table instances found on the page
oTable.init();
// Initialise all o-table instances
// found within a given DOM element
oTable.init(HTMLElement);
// Initialise a specific o-table element
const myTable = oTable(myTableHTMLElement);

Wrap-up

We’ve briefly covered how to include the HTML, CSS (via Sass), and JavaScript for an “o2” Origami component. If you have questions or need help please reach out to the Origami team at any time.