From f503bc7bff4f7657ca9c71ecdbfd89fcf6c69b8e Mon Sep 17 00:00:00 2001 From: Erik Goens Date: Wed, 24 Jul 2024 14:21:53 -0700 Subject: [PATCH] updates documentation for avatar compoents for usage, react, ios and android --- .../components/Avatar/index.tsx | 4 +- www/src/pages/components/avatar/ios/index.mdx | 5 +- .../pages/components/avatar/react/index.mdx | 106 +----------------- .../pages/components/avatar/swiftui/index.mdx | 5 +- .../pages/components/avatar/usage/index.mdx | 84 +++++++------- 5 files changed, 54 insertions(+), 150 deletions(-) diff --git a/packages/thumbprint-react/components/Avatar/index.tsx b/packages/thumbprint-react/components/Avatar/index.tsx index ddb151dbd..e9178016c 100644 --- a/packages/thumbprint-react/components/Avatar/index.tsx +++ b/packages/thumbprint-react/components/Avatar/index.tsx @@ -81,7 +81,7 @@ const EntityAvatar = forwardRef( > {imageUrl ? ( {fullName( /> ) : ( diff --git a/www/src/pages/components/avatar/ios/index.mdx b/www/src/pages/components/avatar/ios/index.mdx index 9ca8126f2..55a0f0767 100644 --- a/www/src/pages/components/avatar/ios/index.mdx +++ b/www/src/pages/components/avatar/ios/index.mdx @@ -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.
- Entity: a company, business, or service. A square with our standard 4px border-radius is - best here. + Entity: a company, business, or service.
- User: a person or user. A circle is best suited for people - primarily faces. + User: a person or user.
![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 ac997537b..ffd09c03c 100644 --- a/www/src/pages/components/avatar/react/index.mdx +++ b/www/src/pages/components/avatar/react/index.mdx @@ -12,26 +12,9 @@ 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 -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 <> @@ -52,23 +35,6 @@ Both `UserAvatar` and `EntityAvatar` are available in five sizes ranging from `x -
-
- -
-
- -
-
- -
-
- -
-
- -
-
``` @@ -98,32 +64,12 @@ Avatars without images can display the the user or entity’s initials instead. -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
``` -## 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 @@ -148,52 +94,6 @@ 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 dd9c70590..a158fb03e 100644 --- a/www/src/pages/components/avatar/swiftui/index.mdx +++ b/www/src/pages/components/avatar/swiftui/index.mdx @@ -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.
- Entity: a company, business, or service. A square with our standard 4px border-radius is - best here. + Entity: a company, business, or service.
- User: a person or user. A circle is best suited for people - primarily faces. + User: a person or user.
## Examples diff --git a/www/src/pages/components/avatar/usage/index.mdx b/www/src/pages/components/avatar/usage/index.mdx index 421360008..ba13b00a1 100644 --- a/www/src/pages/components/avatar/usage/index.mdx +++ b/www/src/pages/components/avatar/usage/index.mdx @@ -9,35 +9,11 @@ import { ComponentHeader, ComponentFooter } from 'components/thumbprint-componen -## 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. - -
- Entity: a company, business, or service. A square with our standard 4px border-radius is - best here. -
+## Usage -
- User: a person or user. A circle is best suited for people - primarily faces. -
+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). -
-
- -
-
Entity Avatar
-
-
-
- -
-
User Avatar
-
-
-
+## Options ### Sizes @@ -54,29 +30,53 @@ One of the defining guidelines for avatars and their shape is what the avatar is
-
- +
+
Extra Large
-
- +
+
Large
-
- +
+
Medium
-
- +
+
Small
-
- +
+
Extra Small
-### 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. + +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
+ +## Blank Avatars When images aren’t provided for avatars we use blank states in their place. @@ -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: +
@@ -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.