@financial-times/o-overlay/origami.json

Configurable custom overlay box that can be used to show overlay windows. The overlays can also be switched to display differently on small screens

{
	"origamiType": "component",
	"origamiVersion": "2.0",
	"brands": [
		"core",
		"internal",
		"whitelabel"
	],
	"support": "https://github.com/Financial-Times/origami/issues/new?labels=o-overlay,components",
	"supportContact": {
		"email": "origami.support@ft.com",
		"slack": "financialtimes/origami-support"
	},
	"supportStatus": "active",
	"browserFeatures": {
		"required": [
			"es5object",
			"es5string",
			"classlist",
			"customevent",
			"requestanimationframe"
		]
	},
	"demosDefaults": {
		"sass": "demos/src/demo.scss",
		"js": "demos/src/demo.js"
	},
	"demos": [
		{
			"name": "modal",
			"title": "Modal overlay",
			"description": "Standard modal. Includes a close button in the top left so the user can dismiss the overlay.",
			"template": "/demos/src/modal.mustache"
		},
		{
			"name": "modal-fullscreen",
			"title": "Modal fullscreen overlay",
			"description": "Fullscreen modal. The user can dismiss the overlay with the close button or back button.",
			"template": "/demos/src/modal-fullscreen.mustache"
		},
		{
			"name": "modal-prevent-closure",
			"title": "Modal without close button",
			"description": "Modal without a dismiss button in the top right. This should be used where the user has to make a choice or confirm they've seen something.",
			"template": "/demos/src/modal-prevent-closure.mustache"
		},
		{
			"name": "sliding-notification",
			"title": "An overlay that is nested in the page",
			"description": "O-overlay can also be used to create overlays that don't sit in the front centre of the screen but appear in a specific area.",
			"template": "/demos/src/sliding-notification.mustache",
			"sass": "demos/src/sliding-notification.scss",
			"js": "demos/src/sliding-notification.js"
		},
		{
			"title": "Pa11y",
			"name": "pa11y",
			"template": "/demos/src/pa11y.mustache",
			"hidden": true,
			"description": "Highlight accessibility issues."
		}
	]
}