feat(ui5-messagestrip): initial implementation (#80)

packages/main/bundle.esm.js

@@ -30,6 +30,7 @@ import Select from "./dist/Select";
 import ShellBar from "./dist/ShellBar";
 import ShellBarItem from "./dist/ShellBarItem";
 import Switch from "./dist/Switch";
+import MessageStrip from "./dist/MessageStrip";
 import TabContainer from "./dist/TabContainer";
 import Tab from "./dist/Tab";
 import TabSeparator from "./dist/TabSeparator";

packages/main/entries-less.esm.js

@@ -149,3 +149,7 @@ import "./src/themes/sap_fiori_3/ListItemBase.less";
 import "./src/themes/sap_belize/ListItem.less";
 import "./src/themes/sap_belize_hcb/ListItem.less";
 import "./src/themes/sap_fiori_3/ListItem.less";
+
+import "./src/themes/sap_belize/MessageStrip.less";
+import "./src/themes/sap_belize_hcb/MessageStrip.less";
+import "./src/themes/sap_fiori_3/MessageStrip.less";

packages/main/src/MessageStrip.hbs

@@ -0,0 +1,16 @@
+<div class="{{classes.main}}">
+	{{#unless ctr.hideIcon}}
+		<ui5-icon class="ui5-messagestrip-icon" src="{{icon}}"></ui5-icon>
+	{{/unless}}
+
+	<span class="{{classes.label}}">{{ctr._nodeText}}</span> 
+
+	{{#unless ctr.hideCloseButton}}
+		<ui5-icon
+			class="{{classes.closeIcon}}"
+			src="sap-icon://decline"
+			tabindex="0"
+			@press="{{ctr._closeButton.press}}">
+		</ui5-icon>
+	{{/unless}}
+</div>

packages/main/src/MessageStrip.js

@@ -0,0 +1,158 @@
+import WebComponent from "@ui5/webcomponents-base/src/sap/ui/webcomponents/base/WebComponent";
+import URI from "@ui5/webcomponents-base/src/sap/ui/webcomponents/base/types/URI";
+import Bootstrap from "@ui5/webcomponents-base/src/sap/ui/webcomponents/base/Bootstrap";
+import ShadowDOM from "@ui5/webcomponents-base/src/sap/ui/webcomponents/base/compatibility/ShadowDOM";
+import MessageStripTemplateContext from "./MessageStripTemplateContext";
+import MessageStripType from "./types/MessageStripType";
+import MessageStripRenderer from "./build/compiled/MessageStripRenderer.lit";
+import Icon from "./Icon";
+
+// Styles
+import belize from "./themes/sap_belize/MessageStrip.less";
+import belizeHcb from "./themes/sap_belize_hcb/MessageStrip.less";
+import fiori3 from "./themes/sap_fiori_3/MessageStrip.less";
+
+ShadowDOM.registerStyle("sap_belize", "MessageStrip.css", belize);
+ShadowDOM.registerStyle("sap_belize_hcb", "MessageStrip.css", belizeHcb);
+ShadowDOM.registerStyle("sap_fiori_3", "MessageStrip.css", fiori3);
+
+/**
+ * @public
+ */
+const metadata = {
+	tag: "ui5-messagestrip",
+	styleUrl: [
+		"MessageStrip.css",
+	],
+	usesNodeText: true,
+	properties: /** @lends sap.ui.webcomponents.main.MessageStrip.prototype */ {
+
+		/**
+		 * Defines the <code>ui5-messagestrip</code> type.
+		 * <br></br>
+		 * <b>Note:</b> Available options are <code>Information"</code>, <code>"Positive"</code>, <code>"Negative"</code>,
+		 * and "Warning".
+		 *
+		 * @type {MessageStripType}
+		 * @defaultvalue "Information"
+		 * @public
+		 */
+		type: { type: MessageStripType, defaultValue: MessageStripType.Information },
+
+		/**
+		 * Defines the icon to be displayed as graphical element within the <code>ui5-messagestrip</code>.
+		 * If no icon is given, the default icon for the MessageStrip type will be added.
+		 * The SAP-icons font provides numerous options.
+		 * <br></br>
+		 * Example:
+		 * <br>
+		 * <pre>ui5-messagestrip icon="sap-icon://palette"</pre>
+		 *
+		 * See all the available icons in the <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
+		 *
+		 * @type {URI}
+		 * @defaultvalue ""
+		 * @public
+		 */
+		icon: { type: URI, defaultValue: null },
+
+		/**
+		 * Defines whether the MessageStrip renders icon in the beginning.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 */
+		hideIcon: { type: Boolean, defaultValue: false },
+
+		/**
+		 * Defines whether the MessageStrip renders close icon.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 */
+		hideCloseButton: { type: Boolean, defaultValue: false },
+
+		_closeButton: { type: Object },
+	},
+	events: /** @lends sap.ui.webcomponents.main.MessageStrip.prototype */ {
+
+		/**
+		 * Fired when the close button is pressed either with a
+		 * click/tap or by using the Enter or Space key.
+		 *
+		 * @event
+		 * @public
+		 */
+		close: {},
+	},
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * The <code>ui5-messagestrip</code> component enables the embedding of app-related messages.
+ * It displays 4 types of messages, each with corresponding semantic color and icon: Information, Positive, Warning and Negative.
+ * Each message can have a close button, so that it can be removed from the UI if needed.
+ *
+ * <h3>Usage</h3>
+ *
+ * For the <code>ui5-messagestrip</code> component, you can define whether it displays
+ * an icon in the beginning and a close button. Moreover, its size and background
+ * can be controlled with CSS.
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import "@ui5/webcomponents/dist/MessageStrip";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.MessageStrip
+ * @extends WebComponent
+ * @tagname ui5-messagestrip
+ * @usestextcontent
+ * @public
+ * @since 0.9.0
+ */
+class MessageStrip extends WebComponent {
+	static get metadata() {
+		return metadata;
+	}
+
+	static get renderer() {
+		return MessageStripRenderer;
+	}
+
+	static get calculateTemplateContext() {
+		return MessageStripTemplateContext.calculate;
+	}
+
+	constructor() {
+		super();
+
+		this._closeButton = {
+			press: this._handleCloseIconPress.bind(this),
+		};
+	}
+
+	_handleCloseIconPress() {
+		this.fireEvent("close", {});
+	}
+
+	static async define(...params) {
+		await Promise.all([
+			Icon.define(),
+		]);
+
+		super.define(...params);
+	}
+}
+
+Bootstrap.boot().then(_ => {
+	MessageStrip.define();
+});
+
+export default MessageStrip;

packages/main/src/MessageStripTemplateContext.js

@@ -0,0 +1,55 @@
+class MessageStripTemplateContext {
+	static calculate(state) {
+		return {
+			ctr: state,
+			classes: {
+				label: MessageStripTemplateContext.getLabelClasses(state),
+				closeIcon: {
+					"ui5-messagestrip-close-icon": true,
+				},
+				main: {
+					"ui5-messagestrip": true,
+					"ui5-messagestrip-icon--hidden": state.hideIcon,
+					"ui5-messagestrip-close-icon--hidden": state.hideCloseButton,
+					[MessageStripTemplateContext.getTypeClasses(state)]: true,
+				},
+			},
+			icon: MessageStripTemplateContext.getIcon(state),
+		};
+	}
+
+	static iconMappings() {
+		return {
+			"Information": "sap-icon://message-information",
+			"Positive": "sap-icon://message-success",
+			"Negative": "sap-icon://message-error",
+			"Warning": "sap-icon://message-warning",
+		};
+	}
+
+	static typeClasses() {
+		return {
+			"Information": "ui5-messagestrip--info",
+			"Positive": "ui5-messagestrip--positive",
+			"Negative": "ui5-messagestrip--negative",
+			"Warning": "ui5-messagestrip--warning",
+		};
+	}
+
+	static getIcon(state) {
+		return state.icon || MessageStripTemplateContext.iconMappings()[state.type];
+	}
+
+	static getLabelClasses(state) {
+		return {
+			"ui5-messagestrip-text": true,
+			"ui5-messagestripNoCloseButton": state.hideCloseButton,
+		};
+	}
+
+	static getTypeClasses(state) {
+		return MessageStripTemplateContext.typeClasses()[state.type];
+	}
+}
+
+export default MessageStripTemplateContext;