feat(ui5-card): fires headerPress event upon header click (#250)

Author: ilhan007

packages/main/src/Card.hbs

@@ -1,5 +1,9 @@
 <div {{> controlData}} class="sapFCard">
-	<header class="sapFCardHeader">
+	<header class="{{classes.header}}"
+		@click="{{ctr._headerClick}}"
+		@keydown="{{ctr._headerKeydown}}"
+		@keyup="{{ctr._headerKeyup}}"
+		tabindex="0">
 		{{#if image}}
 			<img src="{{ctr.avatar}}" aria-label="Avatar" class="sapFCardAvatar sapFCardHeaderImg">
 		{{/if}}

packages/main/src/Card.js

@@ -3,6 +3,8 @@ import URI from "@ui5/webcomponents-base/src/types/URI";
 import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap";
 import ShadowDOM from "@ui5/webcomponents-base/src/compatibility/ShadowDOM";
 import { isIconURI } from "@ui5/webcomponents-base/src/IconPool";
+import { isSpace, isEnter } from "@ui5/webcomponents-base/src/events/PseudoEvents";
+import Function from "@ui5/webcomponents-base/src/types/Function";
 import CardRenderer from "./build/compiled/CardRenderer.lit";
 import Icon from "./Icon";
 
@@ -82,6 +84,34 @@ const metadata = {
 			type: URI,
 			defaultValue: null,
 		},
+
+		_headerActive: {
+			type: Boolean,
+		},
+
+		_headerClick: {
+			type: Function,
+		},
+
+		_headerKeydown: {
+			type: Function,
+		},
+
+		_headerKeyup: {
+			type: Function,
+		},
+	},
+	events: /** @lends sap.ui.webcomponents.main.Card.prototype */ {
+
+		/**
+		 * Fired when the <code>ui5-card</code> header is pressed
+		 * by click/tap or by using the Enter or Space key.
+		 *
+		 * @event
+		 * @public
+		 * @since 0.10.0
+		 */
+		headerPress: {},
 	},
 };
 
@@ -107,6 +137,14 @@ const metadata = {
  * @public
  */
 class Card extends WebComponent {
+	constructor() {
+		super();
+
+		this._headerClick = this.headerClick.bind(this);
+		this._headerKeydown = this.headerKeydown.bind(this);
+		this._headerKeyup = this.headerKeyup.bind(this);
+	}
+
 	static get metadata() {
 		return metadata;
 	}
@@ -125,6 +163,12 @@ class Card extends WebComponent {
 			image,
 			ctr: state,
 			renderIcon: state.icon && !state.image,
+			classes: {
+				header: {
+					"sapFCardHeader": true,
+					"sapFCardHeaderActive": state._headerActive,
+				},
+			},
 		};
 	}
 
@@ -133,6 +177,36 @@ class Card extends WebComponent {
 
 		super.define(...params);
 	}
+
+	headerClick() {
+		this.fireEvent("headerPress");
+	}
+
+	headerKeydown(event) {
+		const enter = isEnter(event);
+		const space = isSpace(event);
+
+		this._headerActive = enter || space;
+
+		if (enter) {
+			this.fireEvent("headerPress");
+			return;
+		}
+
+		if (space) {
+			event.preventDefault();
+		}
+	}
+
+	headerKeyup(event) {
+		const space = isSpace(event);
+
+		this._headerActive = false;
+
+		if (space) {
+			this.fireEvent("headerPress");
+		}
+	}
 }
 
 Bootstrap.boot().then(_ => {

packages/main/src/themes/base/Card.less

@@ -9,6 +9,7 @@
 @_ui5_card_header_active_bg: #f0f0f0;
 @_ui5_card_header_hover_bg: lighten(@_ui5_card_header_active_bg, 4);
 @_ui5_card_header_border_color: darken(@sapUiTileBackground, 20);
+@_ui5_card_focus_border_width: 1px;
 
 :host(ui5-card) {
 	display: inline-block;
@@ -34,17 +35,35 @@ ui5-card {
 }
 
 .sapFCardHeader {
+	position: relative;
 	display: flex;
 	align-items: flex-start;
 	background: @sapUiTileBackground;
 	border-bottom: 1px solid @_ui5_card_header_border_color;
 	padding: @_ui5_card_content_padding;
 }
 
+.sapFCardHeader:focus {
+	outline: none;
+}
+
+.sapFCardHeader:focus:before {
+	content: "";
+	position: absolute;
+	border: @_ui5_card_focus_border_width dotted @sapUiContentFocusColor;
+	pointer-events: none;
+	top: 1px;
+	left: 1px;
+	right: 1px;
+	bottom: 1px;
+}
+
 .sapFCardHeader:hover {
+	cursor: pointer;
 	background: @_ui5_card_header_hover_bg;
 }
 
+.sapFCardHeader.sapFCardHeaderActive,
 .sapFCardHeader:active {
 	background: @_ui5_card_header_active_bg;
 }

packages/main/src/themes/sap_belize_hcb/Card.less

@@ -12,4 +12,5 @@
 
 @_ui5_card_header_hover_bg: @sapUiHighlight;
 @_ui5_card_header_active_bg: @sapUiHighlight;
-@_ui5_card_header_border_color: @sapUiTileBorderColor;
+@_ui5_card_header_border_color: @sapUiTileBorderColor;
+@_ui5_card_focus_border_width: 0.125rem;

packages/main/test/sap/ui/webcomponents/main/pages/Card.html

@@ -26,6 +26,7 @@
 <body>
 
 <ui5-card
+	id="card"
 	status="4 of 10"
 	heading="Quick Links"
 	class="myCard">
@@ -38,7 +39,15 @@
 		<ui5-li icon="sap-icon://bar-chart" >AdWords Campaigns</ui5-li>
 		<ui5-li icon="sap-icon://tools-opportunity" >Winter Campaign Results</ui5-li>
 	</ui5-list>
+
+	<ui5-input id="field" value="0"></ui5-input>
 </ui5-card>
 
+<script>
+	card.addEventListener("headerPress", function (event) {
+		console.log(event);
+		field.value = parseInt(field.value) + 1;
+	});
+</script>
 </body>
 </html>

packages/main/test/specs/Card.spec.js

@@ -1 +1,15 @@
-const assert = require('assert');
+const assert = require('assert');
+describe("Card general interaction", () => {
+	browser.url("http://localhost:8080/test-resources/sap/ui/webcomponents/main/pages/Card.html");
+
+	it("fires headerPress upon click, Enter and Space", () => {
+		const cardHeader = browser.findElementDeep("#card >>> .sapFCardHeader");
+		const field = browser.$("#field");
+
+		cardHeader.click();
+		cardHeader.keys("Space");
+		cardHeader.keys("Enter");
+
+		assert.strictEqual(field.getProperty("value"), "3", "headerPress should be called 3 times");
+	});
+});