-
Notifications
You must be signed in to change notification settings - Fork 25
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Pangolin-3075: Avatar component update (#2621)
* feat(definition.yaml): added font sizes for avatar * feat(avatar): added function to specify font size per char length * feat(avatar): adding logic and colors for avatar bg * chore(tokens): ran node script for design tokens * feat(avatar): added icon as prop for avatar * feat(avatar): added logic for icon * test(avatar): added new props and test * feat(storybook): added new props to storybook * test(vrt): added vrt tests for avatar component * chore(docs): added documentation for avatar component * chore(docs): fixed storybook docs for avatar * chore(docs): added logic for icon prop in storybook * fix(vrt): small spelling error * chore(package.json): added lodash to deps * chore(avatar): added css for icon scalability * chore(changeset): added changeset * Avatar styles refactor proposal (#2628) * refactor(avatar): refactor styles management * fix(avatar): fix sizes and vrts * chore(avatar.styles): accent color update per figma feedback * chore(avatar.styles): removed comments --------- Co-authored-by: Carlos Cortizas <[email protected]>
- Loading branch information
1 parent
e008a64
commit fbd12e2
Showing
13 changed files
with
298 additions
and
111 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| --- | ||
| '@commercetools-uikit/avatar': minor | ||
| '@commercetools-uikit/design-system': minor | ||
| --- | ||
|
|
||
| Added color and icon props for `Avatar` component as well as updated font size/weight/color |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| import { designTokens } from '@commercetools-uikit/design-system'; | ||
| import { css } from '@emotion/react'; | ||
| import startCase from 'lodash/startCase'; | ||
| import { TAvatarProps } from './avatar'; | ||
|
|
||
| const fontSizeMap = { | ||
| s: { | ||
| narrow: designTokens.fontSize30, | ||
| wide: designTokens.fontSize10, | ||
| }, | ||
| m: { | ||
| narrow: designTokens.fontSize50, | ||
| wide: designTokens.fontSize30, | ||
| }, | ||
| l: { | ||
| narrow: designTokens.fontSize90, | ||
| wide: designTokens.fontSize80, | ||
| }, | ||
| }; | ||
|
|
||
| const widthSizeMap = { | ||
| s: '32px', | ||
| m: '40px', | ||
| l: '100px', | ||
| }; | ||
|
|
||
| const colorsMap = { | ||
| accent: { | ||
| normal: designTokens.colorAccent90, | ||
| highlighted: designTokens.colorAccent95, | ||
| }, | ||
| purple: { | ||
| normal: designTokens.colorPurple90, | ||
| highlighted: designTokens.colorPurple95, | ||
| }, | ||
| turquoise: { | ||
| normal: designTokens.colorTurquoise90, | ||
| highlighted: designTokens.colorTurquoise95, | ||
| }, | ||
| brown: { | ||
| normal: designTokens.colorBrown90, | ||
| highlighted: designTokens.colorBrown95, | ||
| }, | ||
| }; | ||
|
|
||
| export const getFontSize = ( | ||
| avatarInitials: string, | ||
| avatarSize: TAvatarProps['size'] | ||
| ) => { | ||
| const widthCode = avatarInitials.length > 1 ? 'wide' : 'narrow'; | ||
| return fontSizeMap[avatarSize][widthCode]; | ||
| }; | ||
|
|
||
| export const getWidthSize = (avatarSize: TAvatarProps['size']) => | ||
| widthSizeMap[avatarSize]; | ||
|
|
||
| export const getBackgroundColor = ( | ||
| avatarColor: TAvatarProps['color'] = 'accent', | ||
| isHighlighted: TAvatarProps['isHighlighted'] | ||
| ) => colorsMap[avatarColor][isHighlighted ? 'highlighted' : 'normal']; | ||
|
|
||
| export const getForegroundColor = (avatarColor: TAvatarProps['color']) => { | ||
| return avatarColor === 'accent' | ||
| ? designTokens.colorAccent40 | ||
| : designTokens[ | ||
| `color${startCase(avatarColor)}50` as keyof typeof designTokens | ||
| ]; | ||
| }; | ||
|
|
||
| export const getAvatarStyles = (avatarProps: TAvatarProps) => { | ||
| const avatarSize = getWidthSize(avatarProps.size); | ||
| const backgroundColor = getBackgroundColor( | ||
| avatarProps.color, | ||
| avatarProps.isHighlighted | ||
| ); | ||
| const foregroundColor = getForegroundColor(avatarProps.color); | ||
| return css` | ||
| align-items: center; | ||
| background-color: ${backgroundColor}; | ||
| border-radius: 100%; | ||
| font-size: ${designTokens.fontSizeDefault}; | ||
| font-weight: ${designTokens.fontWeight600}; | ||
| color: ${foregroundColor}; | ||
| display: flex; | ||
| justify-content: center; | ||
| overflow: hidden; | ||
| position: relative; | ||
| fill: ${foregroundColor}; | ||
| height: ${avatarSize}; | ||
| width: ${avatarSize}; | ||
| `; | ||
| }; |
Oops, something went wrong.
fbd12e2There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
ui-kit – ./
ui-kit-commercetools.vercel.app
uikit.commercetools.com
ui-kit-git-main-commercetools.vercel.app
ui-kit-five-rho.vercel.app