Skip to content

Commit 35e4969

Browse files
authored
feature(avatar): update avatar samples for new documentation (#1237)
1 parent 2e103c2 commit 35e4969

48 files changed

Lines changed: 1206 additions & 201 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

samples/layouts/avatar/icon/index.html

Lines changed: 0 additions & 31 deletions
This file was deleted.

samples/layouts/avatar/icon/src/index.css

Lines changed: 0 additions & 2 deletions
This file was deleted.

samples/layouts/avatar/icon/src/index.ts

Lines changed: 0 additions & 14 deletions
This file was deleted.

samples/layouts/avatar/initials/index.html

Lines changed: 0 additions & 31 deletions
This file was deleted.

samples/layouts/avatar/initials/src/index.css

Lines changed: 0 additions & 2 deletions
This file was deleted.

samples/layouts/avatar/initials/src/index.ts

Lines changed: 0 additions & 14 deletions
This file was deleted.
File renamed without changes.
Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!-- NOTE: do not change this file because it's auto re-generated from template: -->
22
<!-- https://github.com/IgniteUI/igniteui-wc-examples/tree/vnext/templates/browser/sample/ReadMe.md -->
33

4-
This folder contains implementation of Web Components application with example of Icon feature using [Avatar](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
4+
This folder contains implementation of Web Components application with an overview example using the [Avatar](https://infragistics.com/webcomponentssite/components/general-getting-started.html) component.
55

66

77
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
@@ -12,10 +12,10 @@ This folder contains implementation of Web Components application with example o
1212
<a target="_blank" href="./src/index.ts" rel="noopener noreferrer">
1313
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="View Code" src="https://dl.infragistics.com/x/img/browsers/button-code.png"/>
1414
</a>
15-
<a target="_blank" href="https://www.infragistics.com/webcomponents-demos/samples/layouts/avatar/icon" rel="noopener noreferrer">
15+
<a target="_blank" href="https://www.infragistics.com/webcomponents-demos/samples/layouts/avatar/overview" rel="noopener noreferrer">
1616
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://dl.infragistics.com/x/img/browsers/button-run.png"/>
1717
</a>
18-
<a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-wc-examples/tree/master/samples/layouts/avatar/icon?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/{SampleFile}" rel="noopener noreferrer">
18+
<a target="_blank" href="https://codesandbox.io/s/github/IgniteUI/igniteui-wc-examples/tree/master/samples/layouts/avatar/overview?fontsize=14&hidenavigation=1&theme=dark&view=preview&file=/src/{SampleFile}" rel="noopener noreferrer">
1919
<img height="40px" style="border-radius: 0rem; max-width: 100%;" alt="Run Sample" src="https://dl.infragistics.com/x/img/browsers/button-sandbox.png"/>
2020
</a>
2121
</body>
@@ -33,7 +33,7 @@ To set up this project locally, execute these commands:
3333
git clone https://github.com/IgniteUI/igniteui-wc-examples.git
3434
git checkout master
3535
cd ./igniteui-wc-examples
36-
cd ./samples/layouts/avatar/icon
36+
cd ./samples/layouts/avatar/overview
3737
```
3838

3939
open above folder in VS Code or type:
Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title>Avatar Overview</title>
6+
<meta charset="UTF-8" />
7+
8+
<link rel="shortcut icon" href="https://dl.infragistics.com/x/img/browsers/wc.png">
9+
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
10+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Kanit&display=swap" />
11+
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Titillium Web" />
12+
<link rel="stylesheet" href="https://dl.infragistics.com/x/css/samples/shared.v8.css" type="text/css" />
13+
</head>
14+
15+
<body>
16+
<div id="root">
17+
<div class="sample avatar-overview-sample">
18+
<igc-avatar
19+
class="size-large"
20+
shape="circle"
21+
src="https://dl.infragistics.com/x/img/avatars/avatar-profile-04.png"
22+
alt="A profile photo of a man."
23+
></igc-avatar>
24+
25+
<span class="avatar-with-badge">
26+
<igc-avatar
27+
class="size-large"
28+
shape="circle"
29+
src="https://dl.infragistics.com/x/img/avatars/avatar-profile-06.png"
30+
alt="A profile photo of a man."
31+
></igc-avatar>
32+
<igc-badge
33+
class="avatar-status size-large"
34+
dot
35+
outlined
36+
variant="success"
37+
></igc-badge>
38+
</span>
39+
40+
<span class="avatar-stack" aria-label="Project members">
41+
<igc-avatar
42+
class="size-large"
43+
shape="circle"
44+
src="https://dl.infragistics.com/x/img/avatars/avatar-profile-07.png"
45+
alt="A profile photo of a man."
46+
></igc-avatar>
47+
<igc-avatar
48+
class="size-large"
49+
shape="circle"
50+
src="https://dl.infragistics.com/x/img/avatars/avatar-profile-03.png"
51+
alt="A profile photo of a man."
52+
></igc-avatar>
53+
<igc-avatar
54+
class="size-large"
55+
shape="circle"
56+
src="https://dl.infragistics.com/x/img/avatars/avatar-profile-08.png"
57+
alt="A profile photo of a man."
58+
></igc-avatar>
59+
<igc-avatar
60+
class="size-large"
61+
shape="circle"
62+
initials="+3"
63+
alt="Three additional project members."
64+
></igc-avatar>
65+
</span>
66+
</div>
67+
</div>
68+
69+
<!-- This script is needed only for parcel and it will be excluded for webpack -->
70+
<% if (false) { %>
71+
<script src="src/index.ts"></script>
72+
<% } %>
73+
74+
</body>
75+
76+
</html>

samples/layouts/avatar/initials/package.json renamed to samples/layouts/avatar/overview/package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
2-
"name": "wc-avatar-initials",
2+
"name": "wc-avatar-overview",
33
"version": "1.0.0",
4-
"description": "This project provides example of Avatar Initials using IgniteUI for Web Components",
4+
"description": "This project provides an overview Avatar example using Ignite UI for Web Components",
55
"main": "src/index.ts",
66
"scripts": {
77
"build": "npm run build:prod",

0 commit comments

Comments
 (0)