origami-build-tools

Build tools for developing Origami components.

• Installation
• Usage
• Commands
• API Reference
• Migration Guides
• Licence

Installation

1. Install node.js

2. Install the build tools globally:

   npm install -g origami-build-tools

Usage

Developing Existing Components Locally

First, change to your components directory:

git clone [email protected]:Financial-Times/o-table.git
cd o-table

Then install its dependencies:

obt install

To preview the components demos run the dev command. The dev command will automatically re-build the demos every time a file changes:

obt dev

After making your changes run the linter and check for errors:

obt lint

Also run the components tests:

obt test

To debug JavaScript test errors with immediate feedback and breakpoints, pass the debug flag. This will open the tests in a browser window with logs in the browser console. It will also watch and rebuild tests when you make changes:

obt test --debug

Further, JavaScript tests may be run in BrowserStack automatically with the --browserstack flag. See the test command for more details.

Creating A New Component

Origami Build Tools provides boilerplate for creating up a new Origami component. Run obt init and follow the prompts.

API Reference

Usage
	$ obt <command> [<options>]

Commands
	install, i             Install npm dependencies required to build the component
	develop, dev           Build demos locally every time a file changes and run a server to view them
	demo, d                Build demos into the demos directory
	init                   Initialise a new component with a boilerplate folder structure
	test, t                Run Origami specification tests and component specific tests
	verify, v, lint, l     Check folder and code structure follows Origami specification

Options
	-h, --help                 Print out this message
	-v, --version              Print out version of origami-build-tools
	--browserstack             Run tests using Browserstack instead of Chrome Stable
	--demo-filter=<demo-name>  Build a specific demo. E.G. --demo-filter=pa11y to build only the pa11y.html demo.
	--brand=<brand-name>       Build SCSS for a given brand. E.G. --brand=internal to build the component for the internal brand.
	--debug                    Keep the test runner open to enable debugging in any browser.

Commands

install or i

Install npm required to build components.

develop or dev

Build demos locally every time a file changes and run a server to view them.

init

Creates boilerplate for a new Origami component.

demo or d

Build demos found in the origami.json manifest.

Build a specific demo with the --demo-filter option.

Demos consist of HTML, CSS and JS (if Sass & JS exists), and are created in demos/local/. These files should not be committed. It is recommended to add demos/local/ to your .gitignore.

verify or v or lint or l

Lints JavaScript, Sass and configuration files (see Origami code recommendations).

test or t

Runs JavaScript and Sass tests.

• If --debug is set, the test runner will not exit automatically to allow debugging of the tests.

Checks Sass includes a primary mixin. If pa11y.html demo exists, confirms it is accessible using Pa11y. Runs tests using Karma defaulting to Chrome Stable, can be configured to use BrowserStack by using the --browserstack flag. You will need the environment variables BROWSER_STACK_USERNAME and BROWSER_STACK_ACCESS_KEY set. This will run the tests on the minimum version for enhanced experience based on the [FT Browser Support Policy[(https://docs.google.com/document/d/1mByh6sT8zI4XRyPKqWVsC2jUfXHZvhshS5SlHErWjXU).

Migration Guides

Licence

This software is published by the Financial Times under the MIT licence.