Origami Frontend Components & Services

Origami.json Manifest Specification

origami.json is a JSON format file that is responsible for describing various aspects of an Origami component.

Properties

description

Type String
Required true

Should be a concise description of the purpose of the component.

{
	"description": "Branded tables"
}

origamiType

Type String
Required true

Defines the type of Origami component that the manifest belongs to. Must be set to one of:

{
	"origamiType": "module"
}

origamiVersion

Type Integer
Required true

Must be set to 1. It is the version of Origami to which the component conforms.

{
	"origamiVersion": 1
}

brands

Type Array
Required false

For components which support brands, this must an array of one or more brands: “master”, “internal, “whitelabel”.

keywords

Type Array
Required true

Expects keywords related to the component to help discover it in the registry. These should be stored as an array.

{
	"keywords": ["table", "rows", "columns"]
}

origamiCategory

Type String
Required true

Describes the organisational category the component belongs to. Must be one of:

{
	"origamiCategory": "components"
}

support

Type String
Required true

Describes where a user can go for support on this component. Should be the URL of the component’s GitHub issues.

{
	"support": "https://github.com/Financial-Times/o-table/issues"
}

supportStatus

Type String
Required true

Describes the support status of the component’s major version. Must be one of:

{
	"supportStatus": "active"
}

supportContact

Type Object
Required false

Describes contact details a user can choose from to find support for this component. The owner(s) identified in the support options commit to:

The object requires two properties:

{
	"supportContact": {
		"email": "origami.support@ft.com",
		"slack": "financialtimes/ft-origami"
	}
}

ci

Type Object
Required false

This object is no longer used in the Origami manifest. It is documented here for the purpose of reference in case a component does still use it. Describes a set of one or more URLs where build information can be found.

{
	"ci": {
		"circle": "https://circleci.com/api/v1/project/owner/repo",
		"travis": "https://api.travis-ci.org/repos/owner/repo/builds.json",
		"jenkins": "https://jenkins.example.com/job/"
	}
}

circle: A CircleCI build status URL (https://circleci.com/api/v1/project/owner/repo)

browserFeatures

Type Object
Required false

Applies to { "origamiType": "module" } only. Outlines the browser features required for the component’s functionality. The object accepts two properties:

{
	"origamiType": "module",
	"browserFeatures": {
		"required": [
		"customEvent"
		],
		"optional": [
			"IntersectionObserver",
			"IntersectionObserverEntry"
		]
	}
}

serviceUrl

Type String
Required true*

*Applies to { "origamiType": "service" } only.

Is the URL on which the service is provided.

{
	"origamiType": "service",
	"serviceUrl": "https://www.ft.com/__origami/service/build/"
}

demosDefaults

Type Object
Required false

Describes default options to be applied to all demos. The object accepts the following properties:

required (when setting demo defaults):

optional

{
	"demosDefaults": {
		"template": "demos/src/demo.mustache"
		"sass": "demos/src/demo.scss",
		"js": "demos/src/demo.js"
		"data": {
			"striped-rows": true
		},
		"documentClasses": "demo-container",
		"dependencies": ["o-normalise"]
	}
}

demos

Type Array
Required false

It accepts an array. Is a list of configuration objects for individual demos. Each object in the list accepts the following properties:

required:

optional:

{
	"demos": [
		{
			"name": "Basic table",
			"description": "Basic table implementation",
			"template": "demos/src/basic-component.mustache"
		},
		{
			"name": "Striped table",
			"description": "Striped table implementation",
			"template": "demos/src/striped-table.mustache",
			"sass": "demos/src/striped-table.scss",
			"documentClasses": "demo-striped-table-container",
			"brands": ["master", "internal"]
		},
		{
			"name": "pa11y",
			"description": "Hidden test for pa11y",
			"hidden": true,
			"template": "demos/src/pa11y.mustache"
		}
	]
}

Example

This example joins all of the property snippets outlined above:

{
	"description": "Branded tables",
	"origamiType": "module",
	"origamiVersion": 1,
	"keywords": ["table", "rows", "columns"],
	"origamiCategory": "components",
	"support": "https://github.com/Financial-Times/o-table/issues",
	"supportStatus": "active",
	"supportContact": {
			"email": "origami.support@ft.com",
			"slack": "financialtimes/ft-origami"
		}
	"browserFeatures": {
		"required": [
		"customEvent"
		],
		"optional": [
			"IntersectionObserver",
			"IntersectionObserverEntry"
		]
	},
	"demosDefaults": {
		"template": "demos/src/demo.mustache"
		"sass": "demos/src/demo.scss",
		"js": "demos/src/demo.js"
		"data": {
			"striped-rows": true
		},
		"documentClasses": "demo-container",
		"dependencies": ["o-normalise"]
	},
	"demos": [
		{
			"name": "Basic table",
			"description": "Basic table implementation",
			"template": "demos/src/basic-component.mustache"
		},
		{
			"name": "Striped table",
			"description": "Striped table implementation",
			"template": "demos/src/striped-table.mustache",
			"sass": "demos/src/striped-table.scss",
			"documentClasses": "demo-striped-table-container"
		},
		{
			"name": "pa11y",
			"description": "Hidden test for pa11y",
			"hidden": true,
			"template": "demos/src/pa11y.mustache"
		}
	]
}