add more samples

Author: ilhan007

packages/main/test/pages/AvatarGroup.html

@@ -159,20 +159,59 @@ <h5>Business card</h5>
 
 			<button id="reset-btn">Reset fields</button>
 		</div>
-	
+		<br>
+		<br>
+
+		<h3>"XS" size</h3>
 		<ui5-avatar-group type="Individual" avatar-size="XS">
-			<ui5-avatar interactive initials="XS" id="avatar-1"></ui5-avatar> 
-			<ui5-avatar interactive initials="XS"></ui5-avatar> 
-			<ui5-avatar interactive initials="XS"></ui5-avatar> 
-			<ui5-avatar interactive initials="XS"></ui5-avatar> 
-			<ui5-avatar interactive initials="XS"></ui5-avatar> 
-			<ui5-avatar interactive initials="XS"></ui5-avatar> 
-			<ui5-avatar interactive initials="XS"></ui5-avatar> 
-			<ui5-avatar interactive initials="XS"></ui5-avatar> 
-			<ui5-avatar interactive initials="XS"></ui5-avatar> 
-			<ui5-avatar interactive initials="XS"></ui5-avatar> 
-			<ui5-avatar interactive initials="XS"></ui5-avatar> 
-			<ui5-avatar interactive initials="XS"></ui5-avatar> 
+			<ui5-avatar interactive initials="XS"></ui5-avatar>
+			<ui5-avatar interactive initials="XS"></ui5-avatar>
+			<ui5-avatar interactive initials="XS"></ui5-avatar>
+			<ui5-avatar interactive initials="XS"></ui5-avatar>
+			<ui5-avatar interactive initials="XS"></ui5-avatar>
+			<ui5-avatar interactive initials="XS"></ui5-avatar>
+			<ui5-avatar interactive initials="XS"></ui5-avatar>
+			<ui5-avatar interactive initials="XS"></ui5-avatar>
+			<ui5-avatar interactive initials="XS"></ui5-avatar>
+			<ui5-avatar interactive initials="XS"></ui5-avatar>
+			<ui5-avatar interactive initials="XS"></ui5-avatar>
+			<ui5-avatar interactive initials="XS"></ui5-avatar>
+		</ui5-avatar-group>
+
+		<br>
+		<br>
+
+		<h3>"S" size</h3>
+		<ui5-avatar-group type="Individual" avatar-size="S">
+			<ui5-avatar interactive initials="S"></ui5-avatar>
+			<ui5-avatar interactive initials="S"></ui5-avatar>
+			<ui5-avatar interactive initials="S"></ui5-avatar>
+			<ui5-avatar interactive initials="S"></ui5-avatar>
+			<ui5-avatar interactive initials="S"></ui5-avatar>
+			<ui5-avatar interactive initials="S"></ui5-avatar>
+			<ui5-avatar interactive initials="S"></ui5-avatar>
+			<ui5-avatar interactive initials="S"></ui5-avatar>
+			<ui5-avatar interactive initials="S"></ui5-avatar>
+			<ui5-avatar interactive initials="S"></ui5-avatar>
+			<ui5-avatar interactive initials="S"></ui5-avatar>
+			<ui5-avatar interactive initials="S"></ui5-avatar>
+		</ui5-avatar-group>
+
+		<br>
+		<br>
+
+		<h3>Unordinary group</h3>
+		<ui5-avatar-group type="Individual">
+			<ui5-avatar size="XS" interactive initials="XS"></ui5-avatar>
+			<ui5-avatar size="S" interactive initials="S"></ui5-avatar>
+			<ui5-avatar size="M" interactive initials="M"></ui5-avatar>
+			<ui5-avatar size="L" interactive initials="L"></ui5-avatar>
+			<ui5-avatar size="XL" interactive initials="XL"></ui5-avatar>
+			<ui5-avatar size="XS" interactive initials="XS"></ui5-avatar>
+			<ui5-avatar size="S" interactive initials="S"></ui5-avatar>
+			<ui5-avatar size="M" interactive initials="M"></ui5-avatar>
+			<ui5-avatar size="L" interactive initials="L"></ui5-avatar>
+			<ui5-avatar size="XL" interactive initials="XL"></ui5-avatar>
 		</ui5-avatar-group>
 	</div>