From 330d531fc30d908ff177474657940b6e65a0342c Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Sun, 29 Nov 2020 10:50:55 +0300
Subject: [PATCH] Docs for Avatar

---
 src/components/avatar/Avatar.d.ts |   2 +-
 src/components/avatar/Avatar.vue  |   5 +-
 src/views/avatar/AvatarDemo.vue   |  24 ++--
 src/views/avatar/AvatarDoc.vue    | 231 +++++++++++++++++++++++++++++-
 4 files changed, 240 insertions(+), 22 deletions(-)

diff --git a/src/components/avatar/Avatar.d.ts b/src/components/avatar/Avatar.d.ts
index 9065d5826..738b2c3ff 100644
--- a/src/components/avatar/Avatar.d.ts
+++ b/src/components/avatar/Avatar.d.ts
@@ -1,7 +1,7 @@
 import Vue from 'vue';
 
 declare class Avatar extends Vue {
-    letter?: string;
+    label?: string;
     icon?: string;
     image?: string;
 }
diff --git a/src/components/avatar/Avatar.vue b/src/components/avatar/Avatar.vue
index 2c7df72e6..c64c79497 100644
--- a/src/components/avatar/Avatar.vue
+++ b/src/components/avatar/Avatar.vue
@@ -1,7 +1,7 @@
 <template>
     <div :class="containerClass">
         <slot>
-            <span class="p-avatar-letter" v-if="letter">{{letter}}</span>
+            <span class="p-avatar-text" v-if="label">{{label}}</span>
             <span :class="iconClass" v-else-if="icon"></span>
             <img :src="image" v-else-if="image">
         </slot>
@@ -11,7 +11,7 @@
 <script>
 export default {
     props: {
-        letter: {
+        label: {
             type: String,
             default: null
         },
@@ -37,7 +37,6 @@ export default {
             return ['p-avatar p-component', {
                 'p-avatar-image': this.image != null,
                 'p-avatar-circle': this.shape === 'circle',
-                'p-avatar-sm': this.size === 'small',
                 'p-avatar-lg': this.size === 'large',
                 'p-avatar-xl': this.size === 'xlarge'
             }];
diff --git a/src/views/avatar/AvatarDemo.vue b/src/views/avatar/AvatarDemo.vue
index 5fb6cca0d..1eb1845a0 100644
--- a/src/views/avatar/AvatarDemo.vue
+++ b/src/views/avatar/AvatarDemo.vue
@@ -3,7 +3,7 @@
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>Avatar</h1>
-                <p>Avatar represents people using icons, letters and images.</p>
+                <p>Avatar represents people using icons, labels and images.</p>
             </div>
         </div>
 
@@ -11,27 +11,27 @@
             <div class="p-grid">
                 <div class="p-col-12 p-md-4">
                     <div class="card">
-                        <h5>Letter</h5>
-                        <Avatar letter="P" class="p-mr-2" size="xlarge" />
-                        <Avatar letter="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
-                        <Avatar letter="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" />
+                        <h5>Label</h5>
+                        <Avatar label="P" class="p-mr-2" size="xlarge" />
+                        <Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
+                        <Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" />
                     </div>
                 </div>
 
                 <div class="p-col-12 p-md-4">
                     <div class="card">
-                        <h5>Letter - Circle</h5>
-                        <Avatar letter="P" class="p-mr-2" size="xlarge" shape="circle" />
-                        <Avatar letter="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle"  />
-                        <Avatar letter="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle"  />
+                        <h5>Label - Circle</h5>
+                        <Avatar label="P" class="p-mr-2" size="xlarge" shape="circle" />
+                        <Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle"  />
+                        <Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle"  />
                     </div>
                 </div>
 
                 <div class="p-col-12 p-md-4">
                     <div class="card">
-                        <h5>Letter - Badge</h5>
+                        <h5>Label - Badge</h5>
                         <Badge value="4">
-                            <Avatar letter="U" class="p-mr-2" size="xlarge" style="background-color:#4caf4f; color: #ffffff" />
+                            <Avatar label="U" class="p-mr-2" size="xlarge" style="background-color:#4caf4f; color: #ffffff" />
                         </Badge>
                     </div>
                 </div>
@@ -85,7 +85,7 @@
                             <Avatar image="demo/images/avatar/onyamalimba.png" size="large" shape="circle"/>
                             <Avatar image="demo/images/avatar/ionibowcher.png" size="large" shape="circle"/>
                             <Avatar image="demo/images/avatar/xuxuefeng.png" size="large" shape="circle"/>
-                            <Avatar letter="+2" shape="circle" size="large" style="background-color:#9c27b0; color: #ffffff" />
+                            <Avatar label="+2" shape="circle" size="large" style="background-color:#9c27b0; color: #ffffff" />
                         </AvatarGroup>
                     </div>
                 </div>
diff --git a/src/views/avatar/AvatarDoc.vue b/src/views/avatar/AvatarDoc.vue
index 2283d2558..2466fd87f 100644
--- a/src/views/avatar/AvatarDoc.vue
+++ b/src/views/avatar/AvatarDoc.vue
@@ -11,14 +11,65 @@ import AvatarGroup from 'primevue/avatargroup';
 </code></pre>
 
 				<h5>Getting Started</h5>
-				<p>ProgressBar has two modes; "determinate" (default) and "indeterminate". In determinate mode, a value between 0 and 100 is required to display the progress.</p>
+				<p>Avatar has three built-in display modes; "label", "icon" and "image".</p>
 <pre v-code>
 <code>
-
+&lt;Avatar label="P" /&gt;
+&lt;Avatar icon="pi pi-search" /&gt;
+&lt;Avatar image="user.png" /&gt;
 
 </code></pre>
 
-				<h5>Properties</h5>
+				<h5>Sizes</h5>
+				<p><i>size</i> property defines the size of the Avatar with "large" and "xlarge" as possible values.</p>
+<pre v-code>
+<code>
+&lt;Avatar label="P" size="large"/&gt;
+
+</code></pre>
+
+				<h5>AvatarGroup</h5>
+				<p>A set of Avatars can be displayed together using the <i>AvatarGroup</i> component.</p>
+<pre v-code>
+<code>
+&lt;AvatarGroup&gt;
+	&lt;Avatar label="P" /&gt;
+	&lt;Avatar icon="pi pi-search" /&gt;
+	&lt;Avatar image="user.png" /&gt;
+	&lt;Avatar label="+2" /&gt;
+&lt;/AvatarGroup&gt;
+</code></pre>
+
+				<h5>Shape</h5>
+				<p>Avatar comes in two different styles specified with the <i>shape</i> property, "square" is the default and "circle" is the alternative.</p>
+<pre v-code>
+<code>
+&lt;Avatar label="P" shape="circle"/&gt;
+
+</code></pre>
+
+				<h5>Badge</h5>
+				<p>A badge can be added by wrapping the Avatar within a <router-link to="/badge">Badge</router-link> component.</p>
+<pre v-code>
+<code>
+&lt;Badge value="4" severity="info"&gt;
+	&lt;Avatar image="user.png" size="xlarge" /&gt;
+&lt;/Badge&gt;
+
+</code></pre>
+
+				<h5>Templating</h5>
+				<p>Content can easily be customized with the default slot instead of using the built-in modes.</p>
+<pre v-code>
+<code>
+&lt;Avatar&gt;
+   Content
+&lt;/Avatar&gt;
+
+</code></pre>
+
+				<h5>Properties of Avatar</h5>
+				<p>Any property as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
 				<div class="doc-tablewrapper">
 					<table class="doc-table">
 						<thead>
@@ -30,12 +81,44 @@ import AvatarGroup from 'primevue/avatargroup';
                             </tr>
 						</thead>
 						<tbody>
-                            
+							<tr>
+								<td>label</td>
+								<td>string</td>
+								<td>null</td>
+								<td>Defines the text to display.</td>
+							</tr>
+							<tr>
+								<td>icon</td>
+								<td>string</td>
+								<td>null</td>
+								<td>Defines the icon to display.</td>
+							</tr>
+							<tr>
+								<td>image</td>
+								<td>string</td>
+								<td>null</td>
+								<td>Defines the image to display.</td>
+							</tr>
+							<tr>
+								<td>size</td>
+								<td>string</td>
+								<td>null</td>
+								<td>Size of the element, valid options are "large" and "xlarge".</td>
+							</tr>
+							<tr>
+								<td>shape</td>
+								<td>string</td>
+								<td>square</td>
+								<td>Shape of the element, valid options are "square" and "circle".</td>
+							</tr>
 						</tbody>
 					</table>
 				</div>
 
-				<h5>Styling</h5>
+				<h5>Properties of AvatarGrouo</h5>
+				<p>Any property as style and class are passed to the main container element. There are no additional properties.</p>
+				
+				<h5>Styling of Avatar</h5>
 				<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
 				<div class="doc-tablewrapper">
 					<table class="doc-table">
@@ -46,7 +129,52 @@ import AvatarGroup from 'primevue/avatargroup';
                             </tr>
 						</thead>
 						<tbody>
-                            
+                            <tr>
+								<td>p-avatar</td>
+								<td>Container element.</td>
+                            </tr>
+							<tr>
+								<td>p-avatar-image</td>
+								<td>Container element in image mode.</td>
+                            </tr>
+							<tr>
+								<td>p-avatar-circle</td>
+								<td>Container element with a circle shape.</td>
+                            </tr>
+							<tr>
+								<td>p-avatar-text</td>
+								<td>Text of the Avatar.</td>
+                            </tr>
+							<tr>
+								<td>p-avatar-icon</td>
+								<td>Icon of the Avatar.</td>
+                            </tr>
+							<tr>
+								<td>p-avatar-lg</td>
+								<td>Container element with a large size.</td>
+                            </tr>
+							<tr>
+								<td>p-avatar-xl</td>
+								<td>Container element with an xlarge size.</td>
+                            </tr>
+						</tbody>
+					</table>
+				</div>
+
+				<h5>Styling of AvatarGroup</h5>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Element</th>
+                            </tr>
+						</thead>
+						<tbody>
+                            <tr>
+								<td>p-avatar-group</td>
+								<td>Container element.</td>
+                            </tr>
 						</tbody>
 					</table>
 				</div>
@@ -61,7 +189,98 @@ import AvatarGroup from 'primevue/avatargroup';
 				</a>
 <pre v-code>
 <code><template v-pre>
+&lt;div class="p-grid"&gt;
+	&lt;div class="p-col-12 p-md-4"&gt;
+		&lt;div class="card"&gt;
+			&lt;h5&gt;Label&lt;/h5&gt;
+			&lt;Avatar label="P" class="p-mr-2" size="xlarge" /&gt;
+			&lt;Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/&gt;
+			&lt;Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" /&gt;
+		&lt;/div&gt;
+	&lt;/div&gt;
 
+	&lt;div class="p-col-12 p-md-4"&gt;
+		&lt;div class="card"&gt;
+			&lt;h5&gt;Label - Circle&lt;/h5&gt;
+			&lt;Avatar label="P" class="p-mr-2" size="xlarge" shape="circle" /&gt;
+			&lt;Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle"  /&gt;
+			&lt;Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle"  /&gt;
+		&lt;/div&gt;
+	&lt;/div&gt;
+
+	&lt;div class="p-col-12 p-md-4"&gt;
+		&lt;div class="card"&gt;
+			&lt;h5&gt;Label - Badge&lt;/h5&gt;
+			&lt;Badge value="4"&gt;
+				&lt;Avatar label="U" class="p-mr-2" size="xlarge" style="background-color:#4caf4f; color: #ffffff" /&gt;
+			&lt;/Badge&gt;
+		&lt;/div&gt;
+	&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="p-grid"&gt;
+	&lt;div class="p-col-12 p-md-4"&gt;
+		&lt;div class="card"&gt;
+			&lt;h5&gt;Icon&lt;/h5&gt;
+			&lt;Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" /&gt;
+			&lt;Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/&gt;
+			&lt;Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" /&gt;
+		&lt;/div&gt;
+	&lt;/div&gt;
+
+	&lt;div class="p-col-12 p-md-4"&gt;
+		&lt;div class="card"&gt;
+			&lt;h5&gt;Icon - Circle&lt;/h5&gt;
+			&lt;Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" shape="circle" /&gt;
+			&lt;Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" /&gt;
+			&lt;Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" /&gt;
+		&lt;/div&gt;
+	&lt;/div&gt;
+
+		&lt;div class="p-col-12 p-md-4"&gt;
+		&lt;div class="card"&gt;
+			&lt;h5&gt;Icon - Badge&lt;/h5&gt;
+			&lt;Badge value="4" severity="success"&gt;
+				&lt;Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" /&gt;
+			&lt;/Badge&gt;
+		&lt;/div&gt;
+	&lt;/div&gt;
+&lt;/div&gt;
+
+&lt;div class="p-grid"&gt;
+	&lt;div class="p-col-12 p-md-4"&gt;
+		&lt;div class="card"&gt;
+			&lt;h5&gt;Image&lt;/h5&gt;
+			&lt;Avatar image="demo/images/avatar/amyelsner.png" class="p-mr-2" size="xlarge" shape="circle" /&gt;
+			&lt;Avatar image="demo/images/avatar/asiyajavayant.png" class="p-mr-2" size="large" shape="circle" /&gt;
+			&lt;Avatar image="demo/images/avatar/onyamalimba.png" class="p-mr-2" shape="circle" /&gt;
+		&lt;/div&gt;
+	&lt;/div&gt;
+
+	&lt;div class="p-col-12 p-md-4"&gt;
+		&lt;div class="card"&gt;
+			&lt;h5&gt;Avatar Group&lt;/h5&gt;
+			&lt;AvatarGroup class="p-mb-3"&gt;
+				&lt;Avatar image="demo/images/avatar/amyelsner.png" size="large" shape="circle"/&gt;
+				&lt;Avatar image="demo/images/avatar/asiyajavayant.png" size="large" shape="circle"/&gt;
+				&lt;Avatar image="demo/images/avatar/onyamalimba.png" size="large" shape="circle"/&gt;
+				&lt;Avatar image="demo/images/avatar/ionibowcher.png" size="large" shape="circle"/&gt;
+				&lt;Avatar image="demo/images/avatar/xuxuefeng.png" size="large" shape="circle"/&gt;
+				&lt;Avatar label="+2" shape="circle" size="large" style="background-color:#9c27b0; color: #ffffff" /&gt;
+			&lt;/AvatarGroup&gt;
+		&lt;/div&gt;
+	&lt;/div&gt;
+
+		&lt;div class="p-col-12 p-md-4"&gt;
+		&lt;div class="card"&gt;
+			&lt;h5&gt;Image - Badge&lt;/h5&gt;
+			&lt;Badge value="4" severity="danger"&gt;
+				&lt;Avatar image="demo/images/organization/walter.jpg" class="p-mr-2" size="xlarge" /&gt;
+			&lt;/Badge&gt;
+		&lt;/div&gt;
+	&lt;/div&gt;
+&lt;/div&gt;
+&lt;/div&gt;
 </template>
 </code></pre>