Skip to content

Commit 2d2d4a8

Browse files
zeroedinzeroedin
authored
Merge c76f5d8 into 2914145 
2 parents 2914145 + c76f5d8 commit 2d2d4a8

8 files changed

Lines changed: 401 additions & 0 deletions

File tree

‎elements/pf-v6-avatar/demo/avatarImg.svg‎

Lines changed: 18 additions & 0 deletions
Loading

‎elements/pf-v6-avatar/demo/basic.html‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
name: Basic
3+
description: A basic avatar displays a user image.
4+
---
5+
<pf-v6-avatar alt="Avatar image"
6+
src="./avatarImg.svg"></pf-v6-avatar>
7+
8+
<script type="module">
9+
import '@patternfly/elements/pf-v6-avatar/pf-v6-avatar.js';
10+
</script>

‎elements/pf-v6-avatar/demo/bordered.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
name: Bordered
3+
description: A bordered avatar has a thin border around the image.
4+
---
5+
<section>
6+
<pf-v6-avatar bordered
7+
alt="Bordered avatar"
8+
src="./avatarImg.svg"></pf-v6-avatar>
9+
</section>
10+
11+
<script type="module">
12+
import '@patternfly/elements/pf-v6-avatar/pf-v6-avatar.js';
13+
</script>
14+
15+
<style>
16+
section {
17+
padding: 64px 48px;
18+
}
19+
</style>

‎elements/pf-v6-avatar/demo/index.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
name: Basic
3+
description: A basic avatar displays a user image.
4+
---
5+
<pf-v6-avatar></pf-v6-avatar>
6+
7+
<script type="module">
8+
import '@patternfly/elements/pf-v6-avatar/pf-v6-avatar.js';
9+
</script>

‎elements/pf-v6-avatar/demo/size-variations.html‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
---
2+
name: Size variations
3+
description: Avatars can be displayed in four sizes.
4+
---
5+
<dl>
6+
<div>
7+
<dt>Small</dt>
8+
<dd>
9+
<pf-v6-avatar size="sm"
10+
alt="Small avatar"
11+
src="./avatarImg.svg"></pf-v6-avatar>
12+
</dd>
13+
</div>
14+
15+
<div>
16+
<dt>Medium</dt>
17+
<dd>
18+
<pf-v6-avatar size="md"
19+
alt="Medium avatar"
20+
src="./avatarImg.svg"></pf-v6-avatar>
21+
</dd>
22+
</div>
23+
24+
<div>
25+
<dt>Large</dt>
26+
<dd>
27+
<pf-v6-avatar size="lg"
28+
alt="Large avatar"
29+
src="./avatarImg.svg"></pf-v6-avatar>
30+
</dd>
31+
</div>
32+
33+
<div>
34+
<dt>Extra Large</dt>
35+
<dd>
36+
<pf-v6-avatar size="xl"
37+
alt="Extra large avatar"
38+
src="./avatarImg.svg"></pf-v6-avatar>
39+
</dd>
40+
</div>
41+
</dl>
42+
43+
<script type="module">
44+
import '@patternfly/elements/pf-v6-avatar/pf-v6-avatar.js';
45+
</script>
46+
47+
<style>
48+
dl {
49+
padding: 64px 48px;
50+
display: flex;
51+
gap: 1em;
52+
53+
& > div {
54+
display: flex;
55+
gap: 1em;
56+
flex-flow: column;
57+
}
58+
59+
& dd {
60+
margin: 0;
61+
}
62+
}
63+
</style>

‎elements/pf-v6-avatar/pf-v6-avatar.css‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
:host {
2+
--_width: var(--pf-v6-c-avatar--Width, 2.25rem);
3+
--_height: var(--pf-v6-c-avatar--Height, 2.25rem);
4+
--_border-radius: var(--pf-v6-c-avatar--BorderRadius, var(--pf-t--global--border--radius--pill, 30em));
5+
--_border-color: var(--pf-v6-c-avatar--BorderColor, transparent);
6+
--_border-width: var(--pf-v6-c-avatar--BorderWidth, 0);
7+
--_placeholder-bg: var(--pf-t--global--background--color--200, light-dark(var(--pf-t--color--gray--10, #f2f2f2), var(--pf-t--color--gray--80, #292929)));
8+
--_placeholder-fg: var(--pf-t--global--icon--color--subtle, light-dark(var(--pf-t--color--gray--50, #707070), var(--pf-t--color--gray--40, #a3a3a3)));
9+
10+
display: inline-block;
11+
width: var(--_width);
12+
height: var(--_height);
13+
border-radius: var(--_border-radius);
14+
}
15+
16+
:host([hidden]),
17+
[hidden] {
18+
display: none !important;
19+
}
20+
21+
:host([bordered]) {
22+
--_border-color: var(--pf-v6-c-avatar--m-bordered--BorderColor, var(--pf-t--global--border--color--default, #d2d2d2));
23+
--_border-width: var(--pf-v6-c-avatar--m-bordered--BorderWidth, var(--pf-t--global--border--width--box--default, 1px));
24+
}
25+
26+
:host([size="sm"]) {
27+
--_width: var(--pf-v6-c-avatar--m-sm--Width, 1.5rem);
28+
--_height: var(--pf-v6-c-avatar--m-sm--Height, 1.5rem);
29+
}
30+
31+
:host([size="md"]) {
32+
--_width: var(--pf-v6-c-avatar--m-md--Width, 2.25rem);
33+
--_height: var(--pf-v6-c-avatar--m-md--Height, 2.25rem);
34+
}
35+
36+
:host([size="lg"]) {
37+
--_width: var(--pf-v6-c-avatar--m-lg--Width, 4.5rem);
38+
--_height: var(--pf-v6-c-avatar--m-lg--Height, 4.5rem);
39+
}
40+
41+
:host([size="xl"]) {
42+
--_width: var(--pf-v6-c-avatar--m-xl--Width, 8rem);
43+
--_height: var(--pf-v6-c-avatar--m-xl--Height, 8rem);
44+
}
45+
46+
svg,
47+
img {
48+
display: block;
49+
object-fit: cover;
50+
width: var(--_width);
51+
height: var(--_height);
52+
border-radius: var(--_border-radius);
53+
border: var(--_border-width) solid var(--_border-color);
54+
}

‎elements/pf-v6-avatar/pf-v6-avatar.ts‎

Lines changed: 80 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,80 @@
1+
import { LitElement, html, type TemplateResult } from 'lit';
2+
import { property } from 'lit/decorators/property.js';
3+
import { customElement } from 'lit/decorators/custom-element.js';
4+
5+
import style from './pf-v6-avatar.css';
6+
7+
/** Size variants for the avatar. */
8+
export type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
9+
10+
export class PfV6AvatarLoadEvent extends Event {
11+
constructor(public originalEvent: Event) {
12+
super('load', { bubbles: true });
13+
}
14+
}
15+
16+
/**
17+
* An **avatar** is a visual used to represent a user. It may contain an image
18+
* or a placeholder graphic.
19+
* @summary Displays a user's avatar image
20+
* @fires {PfV6AvatarLoadEvent} load - when the avatar image loads
21+
* @cssprop {<length>} --pf-v6-c-avatar--Width - Width of the avatar
22+
* @cssprop {<length>} --pf-v6-c-avatar--Height - Height of the avatar
23+
* @cssprop {<length>} --pf-v6-c-avatar--BorderRadius - Border radius of the avatar
24+
* @cssprop {<color>} --pf-v6-c-avatar--BorderColor - Border color of the avatar
25+
* @cssprop {<length>} --pf-v6-c-avatar--BorderWidth - Border width of the avatar
26+
* @cssprop {<length>} --pf-v6-c-avatar--m-sm--Width - Width when size is `sm`
27+
* @cssprop {<length>} --pf-v6-c-avatar--m-sm--Height - Height when size is `sm`
28+
* @cssprop {<length>} --pf-v6-c-avatar--m-md--Width - Width when size is `md`
29+
* @cssprop {<length>} --pf-v6-c-avatar--m-md--Height - Height when size is `md`
30+
* @cssprop {<length>} --pf-v6-c-avatar--m-lg--Width - Width when size is `lg`
31+
* @cssprop {<length>} --pf-v6-c-avatar--m-lg--Height - Height when size is `lg`
32+
* @cssprop {<length>} --pf-v6-c-avatar--m-xl--Width - Width when size is `xl`
33+
* @cssprop {<length>} --pf-v6-c-avatar--m-xl--Height - Height when size is `xl`
34+
* @cssprop {<color>} --pf-v6-c-avatar--m-bordered--BorderColor - Border color when bordered
35+
* @cssprop {<length>} --pf-v6-c-avatar--m-bordered--BorderWidth - Border width when bordered
36+
*/
37+
@customElement('pf-v6-avatar')
38+
export class PfV6Avatar extends LitElement {
39+
static readonly styles: CSSStyleSheet[] = [style];
40+
41+
/** The URL to the user's custom avatar image. */
42+
@property() src?: string;
43+
44+
/** The alt text for the avatar image. */
45+
@property({ reflect: true }) alt?: string;
46+
47+
/** Size of the avatar */
48+
@property({ reflect: true }) size?: AvatarSize;
49+
50+
/** Whether to display a border around the avatar */
51+
@property({ type: Boolean, reflect: true }) bordered = false;
52+
53+
override render(): TemplateResult {
54+
return this.src != null ? html`
55+
<img id="img"
56+
alt="${this.alt ?? ''}"
57+
src=${this.src}
58+
@load="${this.#onLoad}">
59+
` : html`
60+
<svg id="placeholder"
61+
aria-hidden="true"
62+
xmlns="http://www.w3.org/2000/svg"
63+
viewBox="0 0 36 36">
64+
<rect width="36" height="36" fill="var(--_placeholder-bg)"/>
65+
<path d="M30.5 36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4 1.2-3.4 2.6C6.7 27 5.8 32.2 5.4 36h25.1zM17.7 20.1c-3.5 0-6.4-2.9-6.4-6.4s2.9-6.4 6.4-6.4 6.4 2.9 6.4 6.4-2.8 6.4-6.4 6.4z"
66+
fill="var(--_placeholder-fg)"/>
67+
</svg>
68+
`;
69+
}
70+
71+
#onLoad(event: Event) {
72+
this.dispatchEvent(new PfV6AvatarLoadEvent(event));
73+
}
74+
}
75+
76+
declare global {
77+
interface HTMLElementTagNameMap {
78+
'pf-v6-avatar': PfV6Avatar;
79+
}
80+
}

0 commit comments

Comments
 (0)