@financial-times/o-message

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