Skip to content

Commit

Permalink
Feat(rebrand): Gave the Avatar component the new Brand
Browse files Browse the repository at this point in the history
  • Loading branch information
Franck committed Oct 10, 2023
1 parent 545c7d4 commit d3df63d
Show file tree
Hide file tree
Showing 6 changed files with 37 additions and 83 deletions.
4 changes: 1 addition & 3 deletions packages/components/src/avatar/docs/Avatar.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,13 +68,11 @@ An avatar component can vary in size.
<Preview scope={{ ChrisHadfield }}>
<Story name="size">
<Inline alignY="center">
<Avatar size="2xs" src={ChrisHadfield} name="Chris Hadfield" />
<Avatar size="xs" src={ChrisHadfield} name="Chris Hadfield" />
<Avatar size="sm" src={ChrisHadfield} name="Chris Hadfield" />
<Avatar name="Chris Hadfield" src={ChrisHadfield} />
<Avatar size="md" src={ChrisHadfield} name="Chris Hadfield" />
<Avatar size="lg" src={ChrisHadfield} name="Chris Hadfield" />
<Avatar size="xl" src={ChrisHadfield} name="Chris Hadfield" />
<Avatar size="2xl" src={ChrisHadfield} name="Chris Hadfield" />
</Inline>
</Story>
</Preview>
Expand Down
37 changes: 21 additions & 16 deletions packages/components/src/avatar/src/Avatar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,37 +6,27 @@
}

/* SIZES */
.o-ui-avatar-2xs {
width: var(--o-ui-sz-3);
height: var(--o-ui-sz-3);
.o-ui-avatar-xs {
width: var(--o-ui-sz-2);
height: var(--o-ui-sz-2);
}

.o-ui-avatar-xs {
.o-ui-avatar-sm {
width: var(--o-ui-sz-4);
height: var(--o-ui-sz-4);
}

.o-ui-avatar-sm {
.o-ui-avatar-md {
width: var(--o-ui-sz-5);
height: var(--o-ui-sz-5);
}

.o-ui-avatar-md {
width: var(--o-ui-sz-6);
height: var(--o-ui-sz-6);
}

.o-ui-avatar-lg {
width: var(--o-ui-sz-7);
height: var(--o-ui-sz-7);
}

.o-ui-avatar-xl {
width: var(--o-ui-sz-8);
height: var(--o-ui-sz-8);
}

.o-ui-avatar-2xl {
width: var(--o-ui-sz-9);
height: var(--o-ui-sz-9);
}
Expand All @@ -52,7 +42,7 @@
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--o-ui-white);
color: rgba(var(--o-ui-black) / 0.75);
width: 100%;
height: 100%;
background-color: transparent;
Expand All @@ -65,6 +55,21 @@
align-items: center;
}

.o-ui-avatar-group .o-ui-avatar {
border: 1px solid var(--o-ui-white);
}

.o-ui-avatar-group .o-ui-avatar-xs:not(:first-child),
.o-ui-avatar-group .o-ui-avatar-sm:not(:first-child) {
margin-left: calc(var(--o-ui-sp-1) * -1);
}

.o-ui-avatar-group .o-ui-avatar-md:not(:first-child),
.o-ui-avatar-group .o-ui-avatar-lg:not(:first-child),
.o-ui-avatar-group .o-ui-avatar-xl:not(:first-child) {
margin-left: calc(var(--o-ui-sp-2) * -1);
}

/* GROUPS | REMAININGS */
.o-ui-avatar-group-remainings {
background-color: var(--o-ui-bg-alias-mid-break);
Expand Down
27 changes: 10 additions & 17 deletions packages/components/src/avatar/src/Avatar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export interface InnerAvatarProps extends SlotProps, InternalProps, StyledCompon
/**
* An avatar can vary in size.
*/
size?: ResponsiveProp<"2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl">;
size?: ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl">;
/**
* The url of a remote image or an image object.
*/
Expand Down Expand Up @@ -71,20 +71,14 @@ function AvatarImage({
}

const O365InitialsColorsForName = [
"#99B433",
"#6BA5E7",
"#E773BD",
"#00A300",
"#1E7145",
"#FF0097",
"#7E3878",
"#603CBA",
"#5E4B8B",
"#00ABA9",
"#2D89EF",
"#2B5797",
"#DA532C",
"#B91D47"
"#95B1FF",
"#A3D6CB",
"#FFBF92",
"#AAD89D",
"#9FD2F7",
"#EAC96D",
"#E5DED6",
"#FFBCB7"
];

function AvatarInitials({ "aria-label": ariaLabel, name, size }: Partial<InnerAvatarProps>) {
Expand Down Expand Up @@ -127,9 +121,8 @@ function AvatarInitials({ "aria-label": ariaLabel, name, size }: Partial<InnerAv

/* eslint-disable sort-keys, sort-keys-fix/sort-keys-fix */
const textSize = createSizeAdapter({
"2xs": "xs",
"xs": "xs",
"sm": "sm",
"sm": "xs",
"md": "md",
"lg": "lg",
"xl": "xl",
Expand Down
6 changes: 3 additions & 3 deletions packages/components/src/avatar/src/AvatarGroup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,12 @@ export interface InnerAvatarGroupProps extends Omit<AbstractGroupProps<typeof De
/**
* The avatars of the group can vary in size.
*/
size?: ResponsiveProp<"2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl">;
size?: ResponsiveProp<"xs" | "sm" | "md" | "lg" | "xl">;
}

interface RemainingAvatarsProps {
avatars: ReactElement[];
size?: "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
size?: "xs" | "sm" | "md" | "lg" | "xl";
}

function RemainingAvatars({ avatars, size, ...rest }: RemainingAvatarsProps) {
Expand Down Expand Up @@ -109,7 +109,7 @@ export function InnerAvatarGroup({
{
as,
className: "o-ui-avatar-group",
gap: 1 as const,
gap: 0 as const,
orientation: "horizontal" as const,
ref: forwardedRef,
wrap: wrapValue
Expand Down
10 changes: 1 addition & 9 deletions packages/components/src/avatar/tests/chromatic/Avatar.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,13 +27,11 @@ export const LocalImage: AvatarStory = {
storyName: "local image",
render: () => (
<Inline alignY="center">
<Avatar src={Person} size="2xs" name="Neil Armstrong" />
<Avatar src={Person} size="xs" name="Neil Armstrong" />
<Avatar src={Person} size="sm" name="Neil Armstrong" />
<Avatar src={Person} name="Neil Armstrong" />
<Avatar src={Person} size="lg" name="Neil Armstrong" />
<Avatar src={Person} size="xl" name="Neil Armstrong" />
<Avatar src={Person} size="2xl" name="Neil Armstrong" />
</Inline>
)
};
Expand All @@ -44,21 +42,19 @@ export const RemoteImage: AvatarStory = {
chromatic: { delay: 500 }
},
render: () => (
<Avatar size="2xl" name="Neil Armstrong" src="https://randomuser.me/api/portraits/men/10.jpg" />
<Avatar size="xl" name="Neil Armstrong" src="https://randomuser.me/api/portraits/men/10.jpg" />
)
};

export const FailingRemoteSrc: AvatarStory = {
storyName: "failing remote src",
render: () => (
<Inline alignY="center">
<Avatar size="2xs" src="https://www.google.com" name="Neil Armstrong" />
<Avatar size="xs" src="https://www.google.com" name="Neil Armstrong" />
<Avatar size="sm" src="https://www.google.com" name="Neil Armstrong" />
<Avatar src="https://www.google.com" name="Neil Armstrong" />
<Avatar size="lg" src="https://www.google.com" name="Neil Armstrong" />
<Avatar size="xl" src="https://www.google.com" name="Neil Armstrong" />
<Avatar size="2xl" src="https://www.google.com" name="Neil Armstrong" />
</Inline>
)
};
Expand All @@ -68,13 +64,11 @@ export const Initials: AvatarStory = {
render: () => (
<Stack>
<Inline alignY="center">
<Avatar size="2xs" name="Neil Armstrong" />
<Avatar size="xs" name="Neil Armstrong" />
<Avatar size="sm" name="Neil Armstrong" />
<Avatar name="Neil Armstrong" />
<Avatar size="lg" name="Neil Armstrong" />
<Avatar size="xl" name="Neil Armstrong" />
<Avatar size="2xl" name="Neil Armstrong" />
</Inline>
<Inline>
<Avatar name="Sally Ride" />
Expand All @@ -90,13 +84,11 @@ export const EmptySrc: AvatarStory = {
storyName: "empty src",
render: () => (
<Inline alignY="center">
<Avatar src="" size="2xs" name="Neil Armstrong" />
<Avatar src="" size="xs" name="Neil Armstrong" />
<Avatar src="" size="sm" name="Neil Armstrong" />
<Avatar src="" name="Neil Armstrong" />
<Avatar src="" size="lg" name="Neil Armstrong" />
<Avatar src="" size="xl" name="Neil Armstrong" />
<Avatar src="" size="2xl" name="Neil Armstrong" />
</Inline>
)
};
Expand Down
36 changes: 1 addition & 35 deletions packages/components/src/avatar/tests/chromatic/AvatarGroup.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,10 +28,6 @@ export const Default: AvatarGroupStory = {
render: () => (
<Inline gap={13}>
<Stack>
<AvatarGroup size="2xs">
<Avatar name="Sally Ride" />
<Avatar name="Alan Shepard" />
</AvatarGroup>
<AvatarGroup size="xs">
<Avatar name="Sally Ride" />
<Avatar name="Alan Shepard" />
Expand All @@ -52,18 +48,8 @@ export const Default: AvatarGroupStory = {
<Avatar name="Sally Ride" />
<Avatar name="Alan Shepard" />
</AvatarGroup>
<AvatarGroup size="2xl">
<Avatar name="Sally Ride" />
<Avatar name="Alan Shepard" />
</AvatarGroup>
</Stack>
<Stack>
<AvatarGroup size="2xs">
<Avatar name="Sally Ride" />
<Avatar name="Alan Shepard" />
<Avatar name="Chris Hadfield" />
<Avatar name="Christa McAuliffe" />
</AvatarGroup>
<AvatarGroup size="xs">
<Avatar name="Sally Ride" />
<Avatar name="Alan Shepard" />
Expand Down Expand Up @@ -94,12 +80,6 @@ export const Default: AvatarGroupStory = {
<Avatar name="Chris Hadfield" />
<Avatar name="Christa McAuliffe" />
</AvatarGroup>
<AvatarGroup size="2xl">
<Avatar name="Sally Ride" />
<Avatar name="Alan Shepard" />
<Avatar name="Chris Hadfield" />
<Avatar name="Christa McAuliffe" />
</AvatarGroup>
</Stack>
</Inline>
)
Expand All @@ -124,13 +104,6 @@ export const WithRemainings: AvatarGroupStory = {
storyName: "with remainings",
render: () => (
<Stack>
<AvatarGroup size="2xs">
<Avatar name="Sally Ride" />
<Avatar name="Alan Shepard" />
<Avatar name="Chris Hadfield" />
<Avatar name="Christa McAuliffe" />
<Avatar name="Neil Armstrong" />
</AvatarGroup>
<AvatarGroup size="xs">
<Avatar name="Sally Ride" />
<Avatar name="Alan Shepard" />
Expand Down Expand Up @@ -166,13 +139,6 @@ export const WithRemainings: AvatarGroupStory = {
<Avatar name="Christa McAuliffe" />
<Avatar name="Neil Armstrong" />
</AvatarGroup>
<AvatarGroup size="2xl">
<Avatar name="Sally Ride" />
<Avatar name="Alan Shepard" />
<Avatar name="Chris Hadfield" />
<Avatar name="Christa McAuliffe" />
<Avatar name="Neil Armstrong" />
</AvatarGroup>
</Stack>
)
};
Expand All @@ -181,7 +147,7 @@ export const Overflow: AvatarGroupStory = {
storyName: "overflow",
render: () => (
<Div width={10}>
<AvatarGroup size="2xl">
<AvatarGroup size="xl">
<Avatar name="Sally Ride" />
<Avatar name="Alan Shepard" />
<Avatar name="Chris Hadfield" />
Expand Down

0 comments on commit d3df63d

Please sign in to comment.