diff --git a/next/images/pages/components/avatar/android/online-indicator.png b/next/images/pages/components/avatar/android/online-indicator.png deleted file mode 100644 index 79d31a2dd..000000000 Binary files a/next/images/pages/components/avatar/android/online-indicator.png and /dev/null differ diff --git a/next/images/pages/components/avatar/android/sizes.png b/next/images/pages/components/avatar/android/sizes.png deleted file mode 100644 index c154209ec..000000000 Binary files a/next/images/pages/components/avatar/android/sizes.png and /dev/null differ diff --git a/next/images/pages/components/avatar/android/variations.png b/next/images/pages/components/avatar/android/variations.png deleted file mode 100644 index 26c789ea9..000000000 Binary files a/next/images/pages/components/avatar/android/variations.png and /dev/null differ diff --git a/next/images/pages/components/avatar/android/without-images.png b/next/images/pages/components/avatar/android/without-images.png deleted file mode 100644 index 0f2478bc7..000000000 Binary files a/next/images/pages/components/avatar/android/without-images.png and /dev/null differ diff --git a/next/images/pages/components/avatar/ios/online-now.png b/next/images/pages/components/avatar/ios/online-now.png deleted file mode 100644 index d34929ea1..000000000 Binary files a/next/images/pages/components/avatar/ios/online-now.png and /dev/null differ diff --git a/next/images/pages/components/avatar/ios/variations.png b/next/images/pages/components/avatar/ios/variations.png deleted file mode 100644 index 060e2ee12..000000000 Binary files a/next/images/pages/components/avatar/ios/variations.png and /dev/null differ diff --git a/next/images/pages/components/avatar/swiftui/example-1.png b/next/images/pages/components/avatar/swiftui/example-1.png deleted file mode 100644 index d443474b5..000000000 Binary files a/next/images/pages/components/avatar/swiftui/example-1.png and /dev/null differ diff --git a/next/images/pages/components/avatar/swiftui/example-2.png b/next/images/pages/components/avatar/swiftui/example-2.png deleted file mode 100644 index 330e7415a..000000000 Binary files a/next/images/pages/components/avatar/swiftui/example-2.png and /dev/null differ diff --git a/next/images/pages/components/avatar/swiftui/example-3.png b/next/images/pages/components/avatar/swiftui/example-3.png deleted file mode 100644 index 99f85c826..000000000 Binary files a/next/images/pages/components/avatar/swiftui/example-3.png and /dev/null differ diff --git a/next/pages/components/avatar/android.mdx b/next/pages/components/avatar/android.mdx deleted file mode 100644 index 9d3cc13fc..000000000 --- a/next/pages/components/avatar/android.mdx +++ /dev/null @@ -1,196 +0,0 @@ -import { MDXComponentPage } from '../../../components/mdx/mdx'; -import baseGetStaticProps from '../../../utils/mdx-get-static-props'; -export const getStaticProps = ctx => baseGetStaticProps(ctx, metadata); -export default props => ; - -export const metadata = { - title: 'Avatar', - description: 'Display user images and badges on Thumbtack.', - component: { - id: 'avatar', - platformId: 'android', - }, -}; - -import { Img } from '../../../components/mdx/components'; - -import variations from '../../../images/pages/components/avatar/android/variations.png'; -import sizes from '../../../images/pages/components/avatar/android/sizes.png'; -import withoutImages from '../../../images/pages/components/avatar/android/without-images.png'; -import onlineIndicator from '../../../images/pages/components/avatar/android/online-indicator.png'; - -## Avatar variations - -Avatars can be placed in your layout files as either: `EntityAvatarView` or `UserAvatarView`. - -Screenshot of both Avatar types - -```xml - -``` - -```xml - -``` - -```java -variationEntity.bind(imageUrl = NICOLAS_CAGE_URL, initials = "N") -variationUser.bind(imageUrl = NICOLAS_CAGE_URL, initials = "NC") -``` - -`UserAvatarView` is for people or users whereas `EntityAvatarView` is for companies, businesses, or services. - -Note that image URLs and avatar initials are _not_ specified in the layout; those are specified in the avatar's `.bind()` method. - -```java -/** -* Begins loading the image from the given [imageUrl], positions and sizes the online badge, -* sets its visiblity based on [isOnline], and create a [BlankAvatarDrawable] as the -* fallback avatar. The [BlankAvatarDrawable] will contain the string [initials] and use the -* colors specified in [BlankAvatarDrawable.setColorsFromInitials], which maps the first letter -* of [initials] to background and text color values. -* -* If no [imageUrl] is given, or if there is an error fetching the image, then the -* [BlankAvatarDrawable] created from [initials] will be displayed. A gray placeholder is shown -* during the image's loading if an [imageUrl] is specified. -* -* If both [imageUrl] and [initials] are unspecified, no avatar will be displayed. -* -* As specified in Thumbprint style guides, entity avatars should pass in one letter -* for [initials] and user avatars should pass in two letters for [initials]. -*/ -fun bind(imageUrl: String? = null, initials: String? = null, isOnline: Boolean = false) { - ... -} -``` - -## Avatar sizes - -Both `UserAvatarView` and `EntityAvatarView` are available in five sizes ranging from `avatarExtraLarge` to `avatarExtraSmall`. - -Avatar sizes - -```xml - -``` - -```xml - -``` - -```xml - -``` - -```xml - -``` - -```xml - -``` - ---- - -```xml - -``` - -```xml - -``` - -```xml - -``` - -```xml - -``` - -```xml - -``` - -## Avatars without images - -Avatars without images can display the the user or entity’s initials instead. The initials and background colors are assigned based on the first letter in the `initials` parameter of the `.bind()` method. - -Avatar Without Images - -```xml - - - - ... - - -``` - -```xml - - - - ... - - -``` - -```java -var letters = sequenceOf("A", "B", "C", "D", "E", "F").iterator() -noImagesUser.forEachChild { - (it as? UserAvatarView)?.bind(imageUrl = null, initials = letters.next() + "A") -} - -letters = sequenceOf("A", "B", "C", "D", "E", "F").iterator() -noImagesEntity.forEachChild { - (it as? EntityAvatarView)?.bind(imageUrl = null, initials = letters.next()) -} -``` - -### Online - -This badge indicates that a user or entity is online. It can be set initially through the `.bind()` method, or dynamically through the `setIsOnline()` method. - -Avatar badges - -```java -badgesUser.forEachChild { - (it as? UserAvatarView)?.bind(imageUrl = NICOLAS_CAGE_URL, isOnline = true) -} - -badgesEntity.forEachChild { - (it as? EntityAvatarView)?.bind(imageUrl = NICOLAS_CAGE_URL, isOnline = true) -} -``` diff --git a/next/pages/components/avatar/ios.mdx b/next/pages/components/avatar/ios.mdx deleted file mode 100644 index c914c17d7..000000000 --- a/next/pages/components/avatar/ios.mdx +++ /dev/null @@ -1,84 +0,0 @@ -import { MDXComponentPage } from '../../../components/mdx/mdx'; -import baseGetStaticProps from '../../../utils/mdx-get-static-props'; -export const getStaticProps = ctx => baseGetStaticProps(ctx, metadata); -export default props => ; - -export const metadata = { - title: 'Avatar', - description: 'Display user images and badges on Thumbtack.', - component: { - id: 'avatar', - platformId: 'ios', - }, -}; - -import { Img } from '../../../components/mdx/components'; - -import avatarOnlineNow from '../../../images/pages/components/avatar/ios/online-now.png'; -import avatarVariations from '../../../images/pages/components/avatar/ios/variations.png'; - -## Summary - -Avatars provide a container for displaying Entity or User images on Thumbtack. This `UIView` container 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. - -Use `EntityAvatar` or `UserAvatar` classes directly depending on the object to be displayed. - -
- Entity: a company, business, or service. -
- -
- User: a person or user. -
- - - -```swift -let entityAvatar = EntityAvatar(size: .medium) -entityAvatar.name = "Nicolas Cage" -entityAvatar.initials = "NC" -entityAvatar.setImageURL(avatarImageURL) - -let userAvatar = UserAvatar(size: .medium) -userAvatar.name = "Nicolas Cage" -userAvatar.initials = "NC" -userAvatar.setImageURL(avatarImageURL) -``` - -## Accessibility - -Provide the `name` property to override the view’s accessibility label. If not provided, the accessibility label will be `nil`. - -## Public API - -### `public var image: UIImage?` - -The image displayed in the avatar image view. - -### `public var size: Avatar.Size` - -One of the provided avatar sizes: `xSmall`, `small`, `medium`, `large`, `xLarge` - -### `public var isOnline: Bool` - -Boolean value that controls whether the online badge is shown or not. - - - -### `public var initials: String?` - -The initials to be shown when displaying the blank avatar. Any string longer than one character will be truncated for display. - -### `public var name: String?` - -Used for accessibility label for the avatar. - -### `public init(size: Avatar.Size, initials: String? = nil, name: String? = nil, isOnline: Bool = false)` - -Initializes an EntityAvatar/UserAvatar. Parameters: size: The initial `Avatar.Size` class for the component. initials: Any string longer that one character will be truncated for display. name: Used for accessibility label for the avatar. - -_Note_ A URL extension is provided for utility for loading a remote image. It is not part of the core Thumbprint API as it relies on SDWebImage. - -### `func setImageURL(_ url: URL?) -> SDWebImageOperation?` - -Loads an image from the given URL and sets a blank placeholder image while loading. Once loaded, the image is displayed in the Avatar. diff --git a/next/pages/components/avatar/react.mdx b/next/pages/components/avatar/react.mdx index b0f653e53..c3a105706 100644 --- a/next/pages/components/avatar/react.mdx +++ b/next/pages/components/avatar/react.mdx @@ -15,9 +15,26 @@ export const metadata = { import { UserAvatar, EntityAvatar } from '@thumbtack/thumbprint-react'; import DeprecatedComponentAlert from '../../../components/thumbprint-components/deprecated-component-alert/deprecated-component-alert.tsx'; +## Avatar variations + +Avatars are available as two components: `UserAvatar` and `EntityAvatar`. + +```jsx +
+
+ +
+
+ +
+
+``` + +`UserAvatar` is for people or users whereas `EntityAvatar` is for companies, businesses, or services. + ## Avatar sizes -`UserAvatar`is available in five sizes ranging from `xlarge` to `xsmall`. +Both `UserAvatar` and `EntityAvatar` are available in five sizes ranging from `xlarge` to `xsmall`. ```jsx <> @@ -38,6 +55,23 @@ import DeprecatedComponentAlert from '../../../components/thumbprint-components/ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
``` @@ -67,12 +101,32 @@ Avatars without images can display the the user or entity’s initials instead. +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
``` -## Badging +## Avatar badges -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. +Badges can be added to avatars to denote information including hired status and online status. ### Online @@ -97,5 +151,51 @@ This badge indicates that a user or entity is online. + +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +``` + +### Checked + + + 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. + + +```jsx +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
``` diff --git a/next/pages/components/avatar/swiftui.mdx b/next/pages/components/avatar/swiftui.mdx deleted file mode 100644 index 17be59f18..000000000 --- a/next/pages/components/avatar/swiftui.mdx +++ /dev/null @@ -1,118 +0,0 @@ -import { MDXComponentPage } from '../../../components/mdx/mdx'; -import baseGetStaticProps from '../../../utils/mdx-get-static-props'; -export const getStaticProps = ctx => baseGetStaticProps(ctx, metadata); -export default props => ; - -export const metadata = { - title: 'Avatar', - description: 'Display user images and badges on Thumbtack.', - component: { - id: 'avatar', - platformId: 'swiftui', - }, -}; - -import { Img } from '../../../components/mdx/components'; - -import tpAvatarExample1 from '../../../images/pages/components/avatar/swiftui/example-1.png'; -import tpAvatarExample2 from '../../../images/pages/components/avatar/swiftui/example-2.png'; -import tpAvatarExample3 from '../../../images/pages/components/avatar/swiftui/example-3.png'; - -## Summary - -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. - -
- Entity: a company, business, or service. -
- -
- User: a person or user. -
- -## Examples - -### Initials - -```swift -HStack { - TPAvatar(url: nil, initials: "N") - .tpAvatarTheme(.medium) - .tpAvatarType(.entity) - - TPAvatar(url: nil, initials: "NC", isOnline: true) - .tpAvatarTheme(.medium) - .tpAvatarType(.user) -} -``` - -Initials example screenshot - -### Image initializer / Custom theme - -```swift -TPAvatar(image: Image(systemName: "car.circle.fill"), isOnline: true) - .tpAvatarTheme(TPAvatarTheme(size: 96, badgeSize: 22, font: .callout)) - .tpAvatarType(.user) -``` - -Image init / theme customization example screenshot - -### URL initializer - -```swift -HStack { - TPAvatar(url: URL(string: "https://i.pravatar.cc/140"), isOnline: true) - .tpAvatarTheme(.large) - .tpAvatarType(.user) - - TPAvatar(url: URL(string: "https://i.pravatar.cc/140"), isOnline: true) - .tpAvatarTheme(.large) - .tpAvatarType(.entity) -} -``` - -URL initializer example screenshot - -## Environment Values - -### `.tpAvatarType(_ style: TPAvatarType)` - -Either `.user` or `.entity` - -### `.tpAvatarTheme(_ theme: TPAvatarTheme)` - -Allows customization of the avatar look and feel. Defaults are provided for `xSmall`, `small`, `medium`, `large`, `xLarge` - -## Initializers - -### `public init(url: URL?, initials: String? = nil, isOnline: Bool = false)` - -**url:** - URL used to asynchronously load the avatar image - -### `public init(image: Image, isOnline: Bool = false)` - -**image:** - Image used for the avatar - -### `isOnline: Bool` - -Boolean value that controls whether the online badge is shown or not. - -### `initials: String?` - -The initials to be shown when displaying the blank avatar. One character is used for .entity, and up to two characters can be used for .user styled avatars diff --git a/next/pages/components/avatar/usage.mdx b/next/pages/components/avatar/usage.mdx index 92475cfbc..234250760 100644 --- a/next/pages/components/avatar/usage.mdx +++ b/next/pages/components/avatar/usage.mdx @@ -14,11 +14,35 @@ export const metadata = { import { UserAvatar, EntityAvatar } from '@thumbtack/thumbprint-react'; -## Usage +## Options -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). +### Entities & Users -## Options +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. + +
+ Entity: a company, business, or service. A square with our standard 4px border-radius is + best here. +
+ +
+ User: a person or user. A circle is best suited for people - primarily faces. +
+ +
+
+ +
+
Entity Avatar
+
+
+
+ +
+
User Avatar
+
+
+
### Sizes @@ -35,53 +59,29 @@ The Avatar component is a visual representation of a user or entity. The present
-
- +
+
Extra Large
-
- +
+
Large
-
- +
+
Medium
-
- +
+
Small
-
- +
+
Extra Small
-## 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. - -
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
- -## Blank Avatars +### Blank Avatars When images aren’t provided for avatars we use blank states in their place. @@ -91,8 +91,6 @@ 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: -
@@ -106,7 +104,7 @@ Sizing for the initials will be automatically applied based the sizing options.
-
+
@@ -130,8 +128,4 @@ Sizing for the initials will be automatically applied based the sizing options. ### Color -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. +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. diff --git a/packages/thumbprint-react/components/Avatar/__snapshots__/test.tsx.snap b/packages/thumbprint-react/components/Avatar/__snapshots__/test.tsx.snap index 53f5cfca2..a6be0ef4e 100644 --- a/packages/thumbprint-react/components/Avatar/__snapshots__/test.tsx.snap +++ b/packages/thumbprint-react/components/Avatar/__snapshots__/test.tsx.snap @@ -15,12 +15,12 @@ exports[`EntityAvatar renders an image when the user has one 1`] = ` } > ( > {imageUrl ? ( {fullName( /> ) : ( diff --git a/www/src/pages/components/avatar/ios/index.mdx b/www/src/pages/components/avatar/ios/index.mdx index 55a0f0767..9ca8126f2 100644 --- a/www/src/pages/components/avatar/ios/index.mdx +++ b/www/src/pages/components/avatar/ios/index.mdx @@ -15,11 +15,12 @@ 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.
- Entity: a company, business, or service. + Entity: a company, business, or service. A square with our standard 4px border-radius is + best here.
- User: a person or user. + User: a person or user. A circle is best suited for people - primarily faces.
![Screenshot of Entity and User Avatars](/img/ios/avatar-variations.png) diff --git a/www/src/pages/components/avatar/react/index.mdx b/www/src/pages/components/avatar/react/index.mdx index ffd09c03c..ac997537b 100644 --- a/www/src/pages/components/avatar/react/index.mdx +++ b/www/src/pages/components/avatar/react/index.mdx @@ -12,9 +12,26 @@ import { +## Avatar variations + +Avatars are available as two components: `UserAvatar` and `EntityAvatar`. + +```jsx +
+
+ +
+
+ +
+
+``` + +`UserAvatar` is for people or users whereas `EntityAvatar` is for companies, businesses, or services. + ## Avatar sizes -`UserAvatar`is available in five sizes ranging from `xlarge` to `xsmall`. +Both `UserAvatar` and `EntityAvatar` are available in five sizes ranging from `xlarge` to `xsmall`. ```jsx <> @@ -35,6 +52,23 @@ import {
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
``` @@ -64,12 +98,32 @@ Avatars without images can display the the user or entity’s initials instead.
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
``` -## Badging +## Avatar badges -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. +Badges can be added to avatars to denote information including hired status and online status. ### Online @@ -94,6 +148,52 @@ This badge indicates that a user or entity is online.
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+``` + +### Checked + + + 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. + + +```jsx +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
``` diff --git a/www/src/pages/components/avatar/swiftui/index.mdx b/www/src/pages/components/avatar/swiftui/index.mdx index a158fb03e..dd9c70590 100644 --- a/www/src/pages/components/avatar/swiftui/index.mdx +++ b/www/src/pages/components/avatar/swiftui/index.mdx @@ -13,11 +13,12 @@ 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.
- Entity: a company, business, or service. + Entity: a company, business, or service. A square with our standard 4px border-radius is + best here.
- User: a person or user. + User: a person or user. A circle is best suited for people - primarily faces.
## Examples diff --git a/www/src/pages/components/avatar/usage/index.mdx b/www/src/pages/components/avatar/usage/index.mdx index ba13b00a1..421360008 100644 --- a/www/src/pages/components/avatar/usage/index.mdx +++ b/www/src/pages/components/avatar/usage/index.mdx @@ -9,11 +9,35 @@ import { ComponentHeader, ComponentFooter } from 'components/thumbprint-componen -## Usage +## Options -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). +### Entities & Users -## Options +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. + +
+ Entity: a company, business, or service. A square with our standard 4px border-radius is + best here. +
+ +
+ User: a person or user. A circle is best suited for people - primarily faces. +
+ +
+
+ +
+
Entity Avatar
+
+
+
+ +
+
User Avatar
+
+
+
### Sizes @@ -30,53 +54,29 @@ The Avatar component is a visual representation of a user or entity. The present
-
- +
+
Extra Large
-
- +
+
Large
-
- +
+
Medium
-
- +
+
Small
-
- +
+
Extra Small
-## 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. - -
-
-
- -
-
- -
-
- -
-
- -
-
- -
-
-
- -## Blank Avatars +### Blank Avatars When images aren’t provided for avatars we use blank states in their place. @@ -86,8 +86,6 @@ 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: -
@@ -125,11 +123,7 @@ Sizing for the initials will be automatically applied based the sizing options. ### Color -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. +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.