Origami Frontend Components & Services

origami.json

origami.json is a JSON format file that is responsible for describing various aspects of an Origami project. It is under active development and subject to change, required properties indicate those that Origami tools or services may still rely on.

Properties

description

Type String
Required true

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:

{
	"origamiType": "component"
}

origamiVersion

Type Integer
Required true

The version of the Origami specification the project follows. Note that the specification is now deprecated as of v1, any value other than 1, for example 2.0, indicates the project does not follow a specification:

{
	"origamiVersion": 1
}

brands

Type Array
Required false

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

keywords

Type Array
Required true

Expects keywords related to the project to help discover it in the registry.

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

origamiCategory

Type String
Required true*

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

Describes the organisational category the component belongs to:

{
	"origamiCategory": "components"
}

support

Type String
Required true

Describes where a user can go for support on this project, e.g. 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:

{
	"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"
	}
}

browserFeatures

Type Object
Required false

Applies to { "origamiType": "component" }. 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": '2.0',
	"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"
		}
	]
}