Skip to content

Commit

Permalink
updates documentation for avatar compoents for usage, react, ios and …
Browse files Browse the repository at this point in the history 
…android
  • Loading branch information
@egoens
egoens committed Jul 24, 2024
1 parent 2ca2b60 commit f503bc7
Show file tree
Hide file tree
Showing 5 changed files with 54 additions and 150 deletions.
4 changes: 2 additions & 2 deletions packages/thumbprint-react/components/Avatar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,15 +81,15 @@ const EntityAvatar = forwardRef<HTMLElement, EntityAvatarProps>(
>
{imageUrl ? (
<Image
className={styles.squareAvatar}
className={styles.circleAvatar}
src={imageUrl}
alt={fullName && `Avatar for ${fullName}`}
height={typeof size === 'string' ? dimensions[size] : `${size}px`}
ref={outerRef}
/>
) : (
<span
className={`${styles.initialsAvatar} ${styles.squareAvatar}`}
className={`${styles.initialsAvatar} ${styles.circleAvatar}`}
style={getStyle(initial)}
title={fullName && `Avatar for ${fullName}`}
>
Expand Down
5 changes: 2 additions & 3 deletions www/src/pages/components/avatar/ios/index.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,11 @@ Avatars provide a container for displaying Entity or User images on Thumbtack. T
Use `EntityAvatar` or `UserAvatar` classes directly depending on the object to be displayed.

<div>
<b>Entity</b>: a company, business, or service. A square with our standard 4px border-radius is
best here.
<b>Entity</b>: a company, business, or service.
</div>

<div>
<b>User</b>: a person or user. A circle is best suited for people - primarily faces.
<b>User</b>: a person or user.
</div>

![Screenshot of Entity and User Avatars](/img/ios/avatar-variations.png)
Expand Down
106 changes: 3 additions & 103 deletions www/src/pages/components/avatar/react/index.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,26 +12,9 @@ import {

<ComponentHeader data={props.data} />

## Avatar variations

Avatars are available as two components: `UserAvatar` and `EntityAvatar`.

```jsx
<div className="flex">
<div className="mr3">
<EntityAvatar imageUrl="https://i.pravatar.cc/140" size="xlarge" />
</div>
<div>
<UserAvatar imageUrl="https://i.pravatar.cc/140" size="xlarge" />
</div>
</div>
```

`UserAvatar` is for people or users whereas `EntityAvatar` is for companies, businesses, or services.

## Avatar sizes

Both `UserAvatar` and `EntityAvatar` are available in five sizes ranging from `xlarge` to `xsmall`.
`UserAvatar`is available in five sizes ranging from `xlarge` to `xsmall`.

```jsx
<>
Expand All @@ -52,23 +35,6 @@ Both `UserAvatar` and `EntityAvatar` are available in five sizes ranging from `x
<UserAvatar imageUrl="https://i.pravatar.cc/140" size="xsmall" />
</div>
</div>
<div className="flex items-center">
<div className="mr3">
<EntityAvatar imageUrl="https://i.pravatar.cc/140" size="xlarge" />
</div>
<div className="mr3">
<EntityAvatar imageUrl="https://i.pravatar.cc/140" size="large" />
</div>
<div className="mr3">
<EntityAvatar imageUrl="https://i.pravatar.cc/140" size="medium" />
</div>
<div className="mr3">
<EntityAvatar imageUrl="https://i.pravatar.cc/140" size="small" />
</div>
<div className="mr3">
<EntityAvatar imageUrl="https://i.pravatar.cc/140" size="xsmall" />
</div>
</div>
</>
```

Expand Down Expand Up @@ -98,32 +64,12 @@ Avatars without images can display the the user or entity’s initials instead.
<UserAvatar initials="HA" size="large" />
</div>
</div>
<div className="flex">
<div className="mr2">
<EntityAvatar initial="A" size="large" />
</div>
<div className="mr2">
<EntityAvatar initial="B" size="large" />
</div>
<div className="mr2">
<EntityAvatar initial="C" size="large" />
</div>
<div className="mr2">
<EntityAvatar initial="D" size="large" />
</div>
<div className="mr2">
<EntityAvatar initial="E" size="large" />
</div>
<div>
<EntityAvatar initial="F" size="large" />
</div>
</div>
</>
```

## Avatar badges
## Badging

Badges can be added to avatars to denote information including hired status and online status.
A badge can be added to denote the online status of a user. The badge will be placed on the top right portion of the avatar and use the 400-level green color as positive indicator of their online status.

### Online

Expand All @@ -148,52 +94,6 @@ This badge indicates that a user or entity is online.
<UserAvatar imageUrl="https://i.pravatar.cc/140" isOnline size="xsmall" />
</div>
</div>

<div className="flex items-center">
<div className="mr2">
<EntityAvatar imageUrl="https://i.pravatar.cc/140" isOnline size="xlarge" />
</div>
<div className="mr2">
<EntityAvatar imageUrl="https://i.pravatar.cc/140" isOnline size="large" />
</div>
<div className="mr2">
<EntityAvatar imageUrl="https://i.pravatar.cc/140" isOnline size="medium" />
</div>
<div className="mr2">
<EntityAvatar imageUrl="https://i.pravatar.cc/140" isOnline size="small" />
</div>
<div className="mr2">
<EntityAvatar imageUrl="https://i.pravatar.cc/140" isOnline size="xsmall" />
</div>
</div>
</div>
```

### Checked

<DeprecatedComponentAlert>
The checked badge is deprecated. To indicate hired status of a user, show this information
separately next to the avatar. Only the online badge is supported by both components. Checked is
only supported by UserAvatar.
</DeprecatedComponentAlert>

```jsx
<div className="flex items-center mb4">
<div className="mr2">
<UserAvatar imageUrl="https://i.pravatar.cc/140" isChecked size="xlarge" />
</div>
<div className="mr2">
<UserAvatar imageUrl="https://i.pravatar.cc/140" isChecked size="large" />
</div>
<div className="mr2">
<UserAvatar imageUrl="https://i.pravatar.cc/140" isChecked size="medium" />
</div>
<div className="mr2">
<UserAvatar imageUrl="https://i.pravatar.cc/140" isChecked size="small" />
</div>
<div className="mr2">
<UserAvatar imageUrl="https://i.pravatar.cc/140" isChecked size="xsmall" />
</div>
</div>
```

Expand Down
5 changes: 2 additions & 3 deletions www/src/pages/components/avatar/swiftui/index.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,11 @@ import { ComponentHeader } from 'components/thumbprint-components';
Avatars provide a container for displaying Entity or User images on Thumbtack. This component displays either the filled images after loading the image via URL or the blank Avatar view if there’s no backing image and initials are provided.

<div>
<b>Entity</b>: a company, business, or service. A square with our standard 4px border-radius is
best here.
<b>Entity</b>: a company, business, or service.
</div>

<div>
<b>User</b>: a person or user. A circle is best suited for people - primarily faces.
<b>User</b>: a person or user.
</div>

## Examples
Expand Down
84 changes: 45 additions & 39 deletions www/src/pages/components/avatar/usage/index.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,35 +9,11 @@ import { ComponentHeader, ComponentFooter } from 'components/thumbprint-componen

<ComponentHeader data={props.data} />

## Options

### Entities & Users

One of the defining guidelines for avatars and their shape is what the avatar is representing. We divide these two groups into entities and users.

<div>
<b>Entity</b>: a company, business, or service. A square with our standard 4px border-radius is
best here.
</div>
## Usage

<div>
<b>User</b>: a person or user. A circle is best suited for people - primarily faces.
</div>
The Avatar component is a visual representation of a user or entity. The presentation can vary dependent on the existance on image uploaded by the user to represent an individual (customer) or a business (entity).

<div className="grid mw8 mt3">
<div className="col-4">
<EntityAvatar imageUrl="https://i.pravatar.cc/140" size="xlarge" />
<div className="tp-body-3 mt2 black-300">
<div>Entity Avatar</div>
</div>
</div>
<div className="col-4">
<UserAvatar imageUrl="https://i.pravatar.cc/140" size="xlarge" />
<div className="tp-body-3 mt2 black-300">
<div>User Avatar</div>
</div>
</div>
</div>
## Options

### Sizes

Expand All @@ -54,29 +30,53 @@ One of the defining guidelines for avatars and their shape is what the avatar is
</div>

<div className="flex items-baseline">
<div className="mr4">
<EntityAvatar imageUrl="https://i.pravatar.cc/140" size="xlarge" />
<div className="mr4 tc">
<UserAvatar imageUrl="https://i.pravatar.cc/140" size="xlarge" />
<div className="tp-body-3">Extra Large</div>
</div>
<div className="mr4">
<EntityAvatar imageUrl="https://i.pravatar.cc/140" size="large" />
<div className="mr4 tc">
<UserAvatar imageUrl="https://i.pravatar.cc/140" size="large" />
<div className="tp-body-3">Large</div>
</div>
<div className="mr4">
<EntityAvatar imageUrl="https://i.pravatar.cc/140" size="medium" />
<div className="mr4 tc">
<UserAvatar imageUrl="https://i.pravatar.cc/140" size="medium" />
<div className="tp-body-3">Medium</div>
</div>
<div className="mr4">
<EntityAvatar imageUrl="https://i.pravatar.cc/140" size="small" />
<div className="mr4 tc">
<UserAvatar imageUrl="https://i.pravatar.cc/140" size="small" />
<div className="tp-body-3">Small</div>
</div>
<div className="mr4">
<EntityAvatar imageUrl="https://i.pravatar.cc/140" size="xsmall" />
<div className="mr4 tc">
<UserAvatar imageUrl="https://i.pravatar.cc/140" size="xsmall" />
<div className="tp-body-3">Extra Small</div>
</div>
</div>

### Blank Avatars
## Badging

A badge can be added to denote the online status of a user. The badge will be placed on the top right portion of the avatar and use the 400-level green color as positive indicator of their online status.

<div>
<div className="flex items-center mb4">
<div className="mr2">
<UserAvatar imageUrl="https://i.pravatar.cc/140" isOnline size="xlarge" />
</div>
<div className="mr2">
<UserAvatar imageUrl="https://i.pravatar.cc/140" isOnline size="large" />
</div>
<div className="mr2">
<UserAvatar imageUrl="https://i.pravatar.cc/140" isOnline size="medium" />
</div>
<div className="mr2">
<UserAvatar imageUrl="https://i.pravatar.cc/140" isOnline size="small" />
</div>
<div className="mr2">
<UserAvatar imageUrl="https://i.pravatar.cc/140" isOnline size="xsmall" />
</div>
</div>
</div>

## Blank Avatars

When images aren’t provided for avatars we use blank states in their place.

Expand All @@ -86,6 +86,8 @@ The initials will display capitalized and bolded.

### Type Sizes

Sizing for the initials will be automatically applied based the sizing options. Below is the list of type size mapping:

<div className="grid mw8 mb3">
<div className="col-6">
<div className="tp-body-2 mt2 black-300">
Expand Down Expand Up @@ -123,7 +125,11 @@ The initials will display capitalized and bolded.

### Color

Blank avatars get assigned a 100-level color from our extended palette based on the ascii value of the initials attached to the user name or entity.
Blank avatars get assigned a background 100-level color and 600-level text color from our extended palette based on the ascii value of the initials attached to the user name or entity.

## Accessibility

- The full name or the entity name will be used as the `title` and `alt` text.

<ComponentFooter data={props.data} />

Expand Down

0 comments on commit f503bc7

Please sign in to comment.