Skip to content

Commit

Permalink
fixup! Feat(web): Introduce UNSTABLE_Avatar component #DS-1323
Browse files Browse the repository at this point in the history
  • Loading branch information
@crishpeen
crishpeen committed Jun 13, 2024
1 parent c5103f9 commit bef04cf
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 28 deletions.
56 changes: 38 additions & 18 deletions packages/web/src/scss/components/UNSTABLE_Avatar/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,31 +11,45 @@ can have different sizes.
## Example

```html
<div class="UNSTABLE_Avatar UNSTABLE_Avatar--medium" title="Jiří Bárta">JB</div>
<div class="UNSTABLE_Avatar UNSTABLE_Avatar--medium" aria-label="Profile of Jiří Bárta">
<span aria-hidden="true">JB</span>
</div>

<a href="#" class="UNSTABLE_Avatar UNSTABLE_Avatar--xsmall" title="Jiří Bárta">
<img src="https://picsum.photos/id/823/162/162" alt="" />
<a href="#" class="UNSTABLE_Avatar UNSTABLE_Avatar--xsmall" aria-label="Profile of Jiří Bárta">
<img src="https://picsum.photos/id/823/162/162" alt="Jiří Bárta" aria-hidden="true" />
</a>
```

## Circle
## Square

Add `UNSTABLE_Avatar--circle` modifier to make the avatar a circle.
Add `UNSTABLE_Avatar--square` modifier to make the avatar a square.

```html
<div class="UNSTABLE_Avatar UNSTABLE_Avatar--medium UNSTABLE_Avatar--circle" title="Jiří Bárta">JB</div>
<div class="UNSTABLE_Avatar UNSTABLE_Avatar--medium UNSTABLE_Avatar--square" aria-label="Profile of Jiří Bárta">
<span aria-hidden="true">JB</span>
</div>
```

## Sizes

The Avatar component supports `xsmall`, `small`, `medium`, `large`, and `xlarge` sizes.

```html
<div class="UNSTABLE_Avatar UNSTABLE_Avatar--xsmall" title="Jiří Bárta">JB</div>
<div class="UNSTABLE_Avatar UNSTABLE_Avatar--small" title="Jiří Bárta">JB</div>
<div class="UNSTABLE_Avatar UNSTABLE_Avatar--medium" title="Jiří Bárta">JB</div>
<div class="UNSTABLE_Avatar UNSTABLE_Avatar--large" title="Jiří Bárta">JB</div>
<div class="UNSTABLE_Avatar UNSTABLE_Avatar--xlarge" title="Jiří Bárta">JB</div>
<div class="UNSTABLE_Avatar UNSTABLE_Avatar--xsmall" aria-label="Profile of Jiří Bárta">
<span aria-hidden="true">JB</span>
</div>
<div class="UNSTABLE_Avatar UNSTABLE_Avatar--small" aria-label="Profile of Jiří Bárta">
<span aria-hidden="true">JB</span>
</div>
<div class="UNSTABLE_Avatar UNSTABLE_Avatar--medium" aria-label="Profile of Jiří Bárta">
<span aria-hidden="true">JB</span>
</div>
<div class="UNSTABLE_Avatar UNSTABLE_Avatar--large" aria-label="Profile of Jiří Bárta">
<span aria-hidden="true">JB</span>
</div>
<div class="UNSTABLE_Avatar UNSTABLE_Avatar--xlarge" aria-label="Profile of Jiří Bárta">
<span aria-hidden="true">JB</span>
</div>
```

## Content
Expand All @@ -47,26 +61,28 @@ The content of the `UNSTABLE_Avatar` component can be an image, an icon, or a te
Add an icon with correct size.

```html
<div class="UNSTABLE_Avatar UNSTABLE_Avatar--medium" title="Jiří Bárta">
<div class="UNSTABLE_Avatar UNSTABLE_Avatar--medium" aria-label="Profile of Jiří Bárta">
<svg width="24" height="24" aria-hidden="true">
<use xlink:href="/assets/icons/svg/sprite.svg#profile" />
</svg>
</div>
```

ℹ️ Don't forget to add the `title` attribute for accessibility.
ℹ️ Don't forget to add the `aria-label` attribute for accessible title.

### Image

Add an image, it will be resized to fit the avatar.

```html
<div class="UNSTABLE_Avatar UNSTABLE_Avatar--medium" title="Jiří Bárta">
<img src="https://picsum.photos/id/823/162/162" alt="" />
<div class="UNSTABLE_Avatar UNSTABLE_Avatar--medium" aria-label="Profile of Jiří Bárta">
<img src="https://picsum.photos/id/823/162/162" alt="Jiří Bárta" aria-hidden="true" />
</div>
```

ℹ️ Don't forget to add the `title` attribute for accessibility. The `alt` then can be empty.
ℹ️ Don't forget to add the `aria-label` attribute for accessible title.
The image should have an `alt` attribute set and can be aria-hidden, because the `aria-label`
attribute is set on the container.

### Text

Expand All @@ -75,7 +91,11 @@ This is useful when you want to display the initials of a user. You need to
take care of the text length and case. The rest is handled by the component.

```html
<div class="UNSTABLE_Avatar UNSTABLE_Avatar--medium" title="Jiří Bárta">JB</div>
<div class="UNSTABLE_Avatar UNSTABLE_Avatar--medium" aria-label="Profile of Jiří Bárta">
<span aria-hidden="true">JB</span>
</div>
```

ℹ️ Don't forget to add the `title` attribute for accessibility, especially when using an abbreviation.
ℹ️ Don't forget to add the `aria-label` attribute for accessible title, especially when
using an abbreviation. The `aria-hidden` attribute is set on the text span, because the `aria-label`
attribute is set on the container and the abbreviation is not useful for screen readers.
20 changes: 10 additions & 10 deletions packages/web/src/scss/components/UNSTABLE_Avatar/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ <h2 class="docs-Heading">Icon</h2>
{{setVar "iconSize" "32"}}
{{/if}}

<a href="#" class="UNSTABLE_Avatar UNSTABLE_Avatar--{{size}}" title="Jiří Bárta">
<a href="#" class="UNSTABLE_Avatar UNSTABLE_Avatar--{{size}}" aria-label="Profile of Jiří Bárta">
<svg width="{{@root.iconSize}}" height="{{@root.iconSize}}" aria-hidden="true">
<use xlink:href="/assets/icons/svg/sprite.svg#profile" />
</svg>
Expand All @@ -47,7 +47,7 @@ <h2 class="docs-Heading">Icon</h2>
{{setVar "iconSize" "32"}}
{{/if}}

<div class="UNSTABLE_Avatar UNSTABLE_Avatar--square UNSTABLE_Avatar--{{size}}" title="Jiří Bárta">
<div class="UNSTABLE_Avatar UNSTABLE_Avatar--square UNSTABLE_Avatar--{{size}}" aria-label="Profile of Jiří Bárta">
<svg width="{{@root.iconSize}}" height="{{@root.iconSize}}" aria-hidden="true">
<use xlink:href="/assets/icons/svg/sprite.svg#profile" />
</svg>
Expand All @@ -67,8 +67,8 @@ <h2 class="docs-Heading">Text</h2>

{{#each @root.sizes as |size|}}

<a href="#" class="UNSTABLE_Avatar UNSTABLE_Avatar--{{size}}" title="Jiří Bárta">
JB
<a href="#" class="UNSTABLE_Avatar UNSTABLE_Avatar--{{size}}" aria-label="Profile of Jiří Bárta">
<span aria-hidden="true">JB</span>
</a>

{{/each}}
Expand All @@ -78,8 +78,8 @@ <h2 class="docs-Heading">Text</h2>

{{#each @root.sizes as |size|}}

<div class="UNSTABLE_Avatar UNSTABLE_Avatar--square UNSTABLE_Avatar--{{size}}" title="Jiří Bárta">
JB
<div class="UNSTABLE_Avatar UNSTABLE_Avatar--square UNSTABLE_Avatar--{{size}}" aria-label="Profile of Jiří Bárta">
<span aria-hidden="true">JB</span>
</div>

{{/each}}
Expand All @@ -96,8 +96,8 @@ <h2 class="docs-Heading">Image</h2>

{{#each @root.sizes as |size|}}

<a href="#" class="UNSTABLE_Avatar UNSTABLE_Avatar--{{size}}" title="Jiří Bárta">
<img src="https://picsum.photos/id/823/162/162" alt="" />
<a href="#" class="UNSTABLE_Avatar UNSTABLE_Avatar--{{size}}" aria-label="Profile of Jiří Bárta">
<img src="https://picsum.photos/id/823/162/162" alt="Jiří Bárta" aria-hidden="true" />
</a>

{{/each}}
Expand All @@ -107,8 +107,8 @@ <h2 class="docs-Heading">Image</h2>

{{#each @root.sizes as |size|}}

<div class="UNSTABLE_Avatar UNSTABLE_Avatar--square UNSTABLE_Avatar--{{size}}" title="Jiří Bárta">
<img src="https://picsum.photos/id/823/162/162" alt="" />
<div class="UNSTABLE_Avatar UNSTABLE_Avatar--square UNSTABLE_Avatar--{{size}}" aria-label="Profile of Jiří Bárta">
<img src="https://picsum.photos/id/823/162/162" alt="Jiří Bárta" aria-hidden="true" />
</div>

{{/each}}
Expand Down

0 comments on commit bef04cf

Please sign in to comment.