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 project.

Properties

description

Type String
Required true

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

{
	"description": "Branded tables"
}

origamiType

Type String or null
Required true

Defines the type of Origami project 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 project conforms.

{
	"origamiVersion": 1
}

brands

Type Array
Required false

For components which support brands, this must be an array of one or more brands: “master”, “internal, “whitelabel”. If the brands property does not exist, this means the component supports all the brands.

keywords

Type Array
Required true

Expects keywords related to the project to help discover it in the registry. These should be stored as an array. These may be stored as a comma-separated string.

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

origamiCategory

Type String
Required true*

*Applies to { "origamiType": "component" } and { "origamiType": "module" }.

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 project. Should be the URL of the project’s GitHub issues.

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

supportStatus

Type String
Required true

Describes the support status of the project’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 project. The owner(s) identified in the support options commit to:

The object requires two properties:

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

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 project 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": "component" } and { "origamiType": "module" }. Outlines the browser features required for the component’s functionality. The object accepts two properties:

{
	"origamiType": "component",
	"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:

All of these properties are 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": "component",
	"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/origami-support"
		}
	"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"
		}
	]
}