feat(ui5-avatar): introduce new component (#1135)

packages/main/bundle.esm.js

@@ -15,6 +15,7 @@ import "./dist/Assets.js";
 import "./dist/features/InputElementsFormSupport.js";
 import "./dist/features/InputSuggestions.js";
 
+import Avatar from "./dist/Avatar.js";
 import Badge from "./dist/Badge.js";
 import BusyIndicator from "./dist/BusyIndicator.js";
 import Button from "./dist/Button.js";

packages/main/src/Avatar.hbs

@@ -0,0 +1,7 @@
+<div class="ui5-avatar-root">
+	{{#if displayIcon}}
+		<ui5-icon class="ui5-avatar-icon" name="{{icon}}"></ui5-icon>
+	{{else}}
+		<img alt="avatar" class="ui5-avatar-img" src="{{img}}"/>
+	{{/if}}
+</div>

packages/main/src/Avatar.js

@@ -0,0 +1,144 @@
+import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
+import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
+
+// Template
+import AvatarTemplate from "./generated/templates/AvatarTemplate.lit.js";
+
+// Styles
+import AvatarCss from "./generated/themes/Avatar.css.js";
+
+import Icon from "./Icon.js";
+import AvatarSize from "./types/AvatarSize.js";
+import AvatarShape from "./types/AvatarShape.js";
+
+/**
+ * @public
+ */
+const metadata = {
+	tag: "ui5-avatar",
+	properties: /** @lends sap.ui.webcomponents.main.Avatar.prototype */ {
+
+		/**
+		 * Defines the source path to the desired image.
+		 * @type {string}
+		 * @defaultvalue ""
+		 * @public
+		 */
+		img: {
+			type: String,
+		},
+
+		/**
+		 * Defines the name of the UI5 Icon, that would be displayed.
+		 * <br>
+		 * <b>Note:</b> if <code>img</code> is set, the property would be ignored.
+		 * <br>
+		 * <b>Note:</b> you should import the desired icon first, then use its name as "icon".
+		 * <br><br>
+		 * import "@ui5/webcomponents-icons/dist/icons/{icon_name}.js"
+		 * <br>
+		 * <pre>&lt;ui5-avatar icon-src="employee"></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 {string}
+		 * @defaultvalue ""
+		 * @public
+		 */
+		icon: {
+			type: String,
+		},
+
+		/**
+		 * Defines the shape of the <code>ui5-avatar</code>.
+		 * <br><br>
+		 * Available options are:
+		 * <ul>
+		 * <li><code>Circle</code></li>
+		 * <li><code>Square</code></li>
+		 * <ul>
+		 * @public
+		 * @defaultvalue "Circle"
+		 */
+		shape: {
+			type: String,
+			defaultValue: AvatarShape.Circle,
+		},
+
+		/**
+		 * Defines predefined size of the <code>ui5-avatar</code>.
+		 * <br><br>
+		 * Available options are:
+		 * <ul>
+		 * <li><code>XS</code></li>
+		 * <li><code>S</code></li>
+		 * <li><code>M</code></li>
+		 * <li><code>L</code></li>
+		 * <li><code>XL</code></li>
+		 * <ul>
+		 * @public
+		 * @defaultvalue "S"
+		 */
+		size: {
+			type: String,
+			defaultValue: AvatarSize.S,
+		},
+	},
+	slots: /** @lends sap.ui.webcomponents.main.Avatar.prototype */ {
+	},
+	events: /** @lends sap.ui.webcomponents.main.Avatar.prototype */ {
+	},
+};
+
+/**
+ * @class
+ *
+ * <h3 class="comment-api-title">Overview</h3>
+ *
+ * An image-like control that has different display options for representing images and icons
+ * in different shapes and sizes, depending on the use case.
+ *
+ * The shape can be circular or square. There are several predefined sizes, as well as an option to
+ * set a custom size.
+ *
+ * <h3>ES6 Module Import</h3>
+ *
+ * <code>import @ui5/webcomponents/dist/Avatar.js";</code>
+ *
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.Avatar
+ * @extends UI5Element
+ * @tagname ui5-avatar
+ * @since 1.0.0-rc.6
+ * @public
+ */
+class Avatar extends UI5Element {
+	static get metadata() {
+		return metadata;
+	}
+
+	static get render() {
+		return litRender;
+	}
+
+	static get styles() {
+		return AvatarCss;
+	}
+
+	static get template() {
+		return AvatarTemplate;
+	}
+
+	static async define(...params) {
+		await Icon.define();
+		super.define(...params);
+	}
+
+	get displayIcon() {
+		return !!this.icon && !this.img;
+	}
+}
+
+Avatar.define();
+
+export default Avatar;

packages/main/src/themes/Avatar.css

@@ -0,0 +1,103 @@
+:host(:not([hidden])) {
+	display: inline-block;
+	box-sizing: border-box;
+}
+
+:host {
+	height: 3rem;
+	width: 3rem;
+	border-radius: 50%;
+	outline: none;
+}
+
+/* Shapes */
+:host([shape="Square"]) {
+	border-radius: 0.25rem;
+}
+
+:host([shape="Square"]) .ui5-avatar-root {
+	border-radius: 0.25rem;
+}
+
+:host([shape="Square"]) .ui5-avatar-img {
+	border-radius: 0.25rem;
+}
+
+/* Sizes */
+
+:host([size="XS"]) {
+	height: 2rem;
+	width: 2rem;
+}
+
+:host([size="S"]) {
+	height: 3rem;
+	width: 3rem;
+}
+
+:host([size="M"]) {
+	height: 4rem;
+	width: 4rem;
+}
+
+:host([size="L"]) {
+	height: 5rem;
+	width: 5rem;
+}
+
+:host([size="XL"]) {
+	height: 7rem;
+	width: 7rem;
+}
+
+/* Icon */
+:host .ui5-avatar-icon {
+	height: 1.5rem;
+	width: 1.5rem;
+}
+
+:host([size="XS"]) .ui5-avatar-icon {
+	height: 1rem;
+	width: 1rem;
+}
+
+:host([size="S"]) .ui5-avatar-icon {
+	height: 1.5rem;
+	width: 1.5rem;
+}
+
+:host([size="M"]) .ui5-avatar-icon {
+	height: 2rem;
+	width: 2rem;
+}
+
+:host([size="L"]) .ui5-avatar-icon {
+	height: 2.5rem;
+	width: 2.5rem;
+}
+
+:host([size="XL"]) .ui5-avatar-icon {
+	height: 3rem;
+	width: 3rem;
+}
+
+:host(:not([img-src])) {
+	background-color: var(--sapAccentColor6);
+}
+
+:host(:not([img-src])) .ui5-avatar-icon {
+	color: var(--sapContent_ImagePlaceholderForegroundColor);
+}
+
+.ui5-avatar-root {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.ui5-avatar-root,
+.ui5-avatar-img {
+	height: 100%;
+	width: 100%;
+	border-radius: 50%;
+}

packages/main/src/types/AvatarShape.js

@@ -0,0 +1,41 @@
+import DataType from "@ui5/webcomponents-base/dist/types/DataType.js";
+
+/**
+ * Different types of AvatarShape.
+ * @lends sap.ui.webcomponents.main.types.AvatarShape.prototype
+ * @public
+ */
+const AvatarShapes = {
+	/**
+	 * Circular shape.
+	 * @public
+	 * @type {Circle}
+	 */
+	Circle: "Circle",
+
+	/**
+	 * Square shape.
+	 * @public
+	 * @type {Square}
+	 */
+	Square: "Square",
+};
+
+/**
+ * @class
+ * Different types of AvatarShape.
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.types.AvatarShape
+ * @public
+ * @enum {string}
+ */
+class AvatarShape extends DataType {
+	static isValid(value) {
+		return !!AvatarShapes[value];
+	}
+}
+
+AvatarShape.generataTypeAcessors(AvatarShapes);
+
+export default AvatarShape;

packages/main/src/types/AvatarSize.js

@@ -0,0 +1,67 @@
+import DataType from "@ui5/webcomponents-base/dist/types/DataType.js";
+
+/**
+ * Different types of AvatarSize.
+ * @lends sap.ui.webcomponents.main.types.AvatarSize.prototype
+ * @public
+ */
+const AvatarSizes = {
+	/**
+	 * component size - 2rem
+	 * font size - 1rem
+	 * @public
+	 * @type {XS}
+	 */
+	XS: "XS",
+
+	/**
+	 * component size - 3rem
+	 * font size - 1.5rem
+	 * @public
+	 * @type {S}
+	 */
+	S: "S",
+
+	/**
+	 * component size - 4rem
+	 * font size - 2rem
+	 * @public
+	 * @type {M}
+	 */
+	M: "M",
+
+	/**
+	 * component size - 5rem
+	 * font size - 2.5rem
+	 * @public
+	 * @type {L}
+	 */
+	L: "L",
+
+	/**
+	 * component size - 7rem
+	 * font size - 3rem
+	 * @public
+	 * @type {XL}
+	 */
+	XL: "XL",
+};
+
+/**
+ * @class
+ * Different types of AvatarSize.
+ * @constructor
+ * @author SAP SE
+ * @alias sap.ui.webcomponents.main.types.AvatarSize
+ * @public
+ * @enum {string}
+ */
+class AvatarSize extends DataType {
+	static isValid(value) {
+		return !!AvatarSizes[value];
+	}
+}
+
+AvatarSize.generataTypeAcessors(AvatarSizes);
+
+export default AvatarSize;