{
"origamiType": "component",
"origamiVersion": "2.0",
"brands": ["core", "internal", "whitelabel"],
"support": "https://github.com/Financial-Times/origami/issues/new?labels=o-message,components",
"supportContact": {
"email": "origami.support@ft.com",
"slack": "financialtimes/origami-support"
},
"supportStatus": "active",
"browserFeatures": {},
"demosDefaults": {
"sass": "demos/src/demo.scss",
"js": "demos/src/demo.js",
"template": "demos/src/message-template.mustache",
"documentClasses": ""
},
"demos": [
{
"title": "Alert: Success",
"name": "alert-success",
"description": "Alert message for a positive response to an action",
"data": {
"type": "alert",
"state": "success",
"highlight": [
{
"copy": "Hooray!",
"color": false
}
],
"content": "The quick brown fox jumped over the lazy dogs!",
"actions": {
"button": true,
"link": true
}
}
},
{
"title": "Alert Inner: Success",
"name": "alert-inner-success",
"description": "Alert message for a positive response to an action, styled to fit within another container",
"data": {
"inner": true,
"type": "alert",
"state": "success",
"highlight": [
{
"copy": "Hooray!",
"color": false
}
],
"content": "The quick brown fox jumped over the lazy dogs!",
"additionalContent": "Did you know that that sentence uses all of the letters in the alphabet at least once?",
"actions": {
"button": true,
"link": true
}
}
},
{
"title": "Alert: Neutral",
"name": "alert-neutral",
"description": "Alert message for an informative response to an action",
"data": {
"type": "alert",
"state": "neutral",
"content": "There's a fox, and some lazy dogs. Many lazy dogs. Many, many, many lazy dogs. Only one fox. Many, many, many lazy dogs.",
"actions": {
"button": true,
"link": true
}
}
},
{
"title": "Alert Inner: Neutral",
"name": "alert-inner-neutral",
"description": "Alert message for an informative response to an action, styled to fit within another container",
"data": {
"inner": true,
"type": "alert",
"state": "neutral",
"highlight": [
{
"copy": "Meh.",
"color": false
}
],
"detail": "The quick brown fox did not jump over the lazy dogs.",
"actions": {
"button": true,
"link": true
}
}
},
{
"title": "Alert: Error",
"name": "alert-error",
"description": "Alert message for a negative response to an action",
"data": {
"type": "alert",
"state": "error",
"content": "The quick brown fox did not jump over the lazy dogs.",
"actions": {
"button": true,
"link": true
}
}
},
{
"title": "Alert Inner: Error",
"name": "alert-inner-error",
"description": "Alert message for a negative response to an action, styled to fit within another container",
"data": {
"inner": true,
"type": "alert",
"state": "error",
"highlight": [
{
"copy": "Oops.",
"color": false
}
],
"content": "The quick brown fox did not jump over the lazy dogs.",
"additionalContent": "But that sentence still uses all of the letters in the alphabet at least once!",
"actions": {
"button": true,
"link": true
}
}
},
{
"title": "Notice: Inform",
"name": "notice-inform",
"description": "Notice message to convey information",
"data": {
"type": "notice",
"state": "inform",
"content": "There are lazy dogs, maybe in a field, maybe not. It's important that you are informed of this fact.",
"actions": {
"button": true,
"link": true
}
}
},
{
"title": "Notice Inner: Inform",
"name": "notice-inner-inform",
"description": "Notice message to convey information, styled to fit within another container",
"data": {
"inner": true,
"type": "notice",
"state": "inform",
"content": "There are lazy dogs, maybe in a field, maybe not. It's important that you are informed of this fact.",
"actions": {
"button": true,
"link": true
},
"noCloseButton": true
}
},
{
"title": "Notice: Warning Light",
"name": "notice-warning-light",
"description": "Notice message to emit a light warning",
"data": {
"type": "notice",
"state": "warning-light",
"content": "There are lazy dogs, maybe in a field, maybe not. It's important that you are informed of this fact."
},
"brands": ["internal"]
},
{
"title": "Notice Inner: Warning Light",
"name": "notice-inner-warning-light",
"description": "Notice message to emit a light warning, styled to fit within another container",
"data": {
"inner": true,
"type": "notice",
"state": "warning-light",
"content": "There are lazy dogs, maybe in a field, maybe not. It's important that you are informed of this fact. There may also be a fox. This is unconfirmed.",
"actions": {
"button": true,
"link": true
},
"noCloseButton": true
},
"brands": ["internal"]
},
{
"title": "Notice: Warning",
"name": "notice-warning",
"description": "Notice message to emit a strong warning",
"data": {
"type": "notice",
"state": "warning",
"content": "There are lazy dogs, maybe in a field, maybe not. It's important that you are informed of this fact."
},
"brands": ["internal"]
},
{
"title": "Notice Inner: Warning",
"name": "notice-inner-warning",
"description": "Notice message to emit a strong warning, styled to fit within another container",
"data": {
"inner": true,
"type": "notice",
"state": "warning",
"content": "There are lazy dogs, maybe in a field, maybe not. It's important that you are informed of this fact. There may also be a fox. This is unconfirmed."
},
"brands": ["internal"]
},
{
"title": "Notice: Feedback",
"name": "notice-feedback",
"description": "Notice message to emit a strong feedback",
"data": {
"type": "notice",
"state": "feedback",
"content": "There are lazy dogs, maybe in a field, maybe not. It's important that you are informed of this fact.",
"actions": {
"button": true
}
},
"brands": ["core", "internal"]
},
{
"title": "Notice Inner: Feedback",
"name": "notice-inner-feedback",
"description": "Notice message to request feedback",
"data": {
"inner": true,
"type": "notice",
"state": "feedback",
"content": "There are lazy dogs, maybe in a field, maybe not. It's important that you are informed of this fact. There may also be a fox. This is unconfirmed.",
"actions": {
"button": true
}
},
"brands": ["core", "internal"]
},
{
"title": "Action: Inform Inverse",
"name": "action-inform-inverse",
"description": "Action message, displaying a call to action",
"data": {
"type": "action",
"state": "inform-inverse",
"centralised": true,
"content": "The quick brown fox did not jump over the lazy dogs.",
"actions": {
"button": true
},
"noCloseButton": true
},
"brands": ["internal"]
},
{
"title": "Alert: Custom",
"name": "alert-custom",
"description": "Sass users may customise alert messages. See the README for more information.",
"data": {
"type": "alert",
"state": "pikachu",
"highlight": [
{
"copy": "Hurray",
"color": false
},
{
"copy": "thing",
"color": true
},
{
"copy": "happened",
"color": false
}
],
"content": "The quick brown fox jumped over the lazy dogs!",
"actions": {
"button": true,
"link": true
}
},
"display_html": false,
"brands": ["core", "internal"]
},
{
"title": "Notice: Custom",
"name": "notice-custom",
"description": "Sass users may customise notice messages. See the README for more information.",
"data": {
"type": "notice",
"state": "pikachu",
"highlight": [
{
"copy": "The status of",
"color": false
},
{
"copy": "thing",
"color": true
},
{
"copy": "is notable",
"color": false
}
],
"content": "The quick brown fox jumped over the lazy dogs!",
"actions": {
"button": true,
"link": true
}
},
"display_html": false,
"brands": ["core", "internal"]
},
{
"title": "Action: Custom",
"name": "action-custom",
"description": "Sass users may customise action messages. See the README for more information.",
"data": {
"type": "action",
"state": "pikachu",
"highlight": [
{
"copy": "Are you enjoying",
"color": false
},
{
"copy": "thing",
"color": true
},
{
"copy": "?",
"color": false
}
],
"content": "The quick brown fox jumped over the lazy dogs!",
"actions": {
"button": true,
"link": true
},
"noCloseButton": true
},
"display_html": false,
"brands": ["internal"]
},
{
"title": "Imperative",
"name": "imperative",
"js": "demos/src/imperative.js",
"template": "demos/src/imperative.mustache",
"description": "Examples of all messages, built into the DOM on click",
"hidden": true
}
]
}