Skip to content

Commit

Permalink
fix(react-components): change Avatar "typographyProps" to "renderInit…
Browse files Browse the repository at this point in the history 
…ials" prop
  • Loading branch information
@donskov
donskov committed Feb 27, 2024
1 parent 48f0e5c commit af60902
Show file tree
Hide file tree
Showing 3 changed files with 89 additions and 182 deletions.
186 changes: 44 additions & 142 deletions packages/react-components/src/Avatar/__snapshots__/avatar.test.tsx.snap
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`<Avatar /> Avatar render sizes should render a "large" size 1`] = `
exports[`<Avatar /> Avatar render sizes size "large" 1`] = `
<DocumentFragment>
.emotion-0 {
background: var(--pv-color-gray-7);
Expand Down Expand Up @@ -46,7 +46,7 @@ exports[`<Avatar /> Avatar render sizes should render a "large" size 1`] = `
</DocumentFragment>
`;

exports[`<Avatar /> Avatar render sizes should render a "medium" size 1`] = `
exports[`<Avatar /> Avatar render sizes size "medium" 1`] = `
<DocumentFragment>
.emotion-0 {
background: var(--pv-color-gray-7);
Expand Down Expand Up @@ -92,7 +92,7 @@ exports[`<Avatar /> Avatar render sizes should render a "medium" size 1`] = `
</DocumentFragment>
`;

exports[`<Avatar /> Avatar render sizes should render a "small" size 1`] = `
exports[`<Avatar /> Avatar render sizes size "small" 1`] = `
<DocumentFragment>
.emotion-0 {
background: var(--pv-color-gray-7);
Expand Down Expand Up @@ -138,7 +138,7 @@ exports[`<Avatar /> Avatar render sizes should render a "small" size 1`] = `
</DocumentFragment>
`;

exports[`<Avatar /> Avatar render variants should render 1 initial with a 1-word name 1`] = `
exports[`<Avatar /> Avatar render variants shoul change initials render element 1`] = `
<DocumentFragment>
.emotion-0 {
background: var(--pv-color-gray-7);
Expand All @@ -164,25 +164,16 @@ exports[`<Avatar /> Avatar render variants should render 1 initial with a 1-wor
width: var(--pv-size-base-7);
}
.emotion-1 {
margin: 0;
color: var(--pv-color-white);
font-weight: var(--pv-text-b1-weight);
font-size: var(--pv-text-b1-size);
line-height: var(--pv-text-b1-height);
letter-spacing: var(--pv-text-b1-spacing);
}
<div
class="emotion-0"
>
<p
<h1
aria-label="First"
class="emotion-1"
color="white"
role="img"
>
F
</p>
</h1>
</div>
</DocumentFragment>
`;
Expand Down Expand Up @@ -329,101 +320,7 @@ exports[`<Avatar /> Avatar render variants should prioritize render as image ove
</DocumentFragment>
`;

exports[`<Avatar /> Avatar render variants should render as default 1`] = `
<DocumentFragment>
.emotion-0 {
background: var(--pv-color-gray-7);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-radius: 50%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
position: relative;
height: var(--pv-size-base-7);
width: var(--pv-size-base-7);
}
<div
class="emotion-0"
>
<svg
fill="none"
role="img"
viewBox="0 0 10 13"
width="10"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2.998 3.174c0 1.594 1 2.674 2 2.674s2-1.08 2-2.674c0-1.595-1-2.674-2-2.674s-2 1.08-2 2.674zM5 8.858c-1.249 0-2.383-.448-3.308-1.146C.95 8.064.5 8.878.5 9.812v2.12h9V9.81c0-.918-.46-1.746-1.193-2.098C7.383 8.41 6.25 8.858 5 8.858z"
fill="#fff"
stroke="#fff"
/>
</svg>
</div>
</DocumentFragment>
`;

exports[`<Avatar /> Avatar render variants should render as image 1`] = `
<DocumentFragment>
.emotion-0 {
background: var(--pv-color-gray-7);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
border-radius: 50%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
position: relative;
height: var(--pv-size-base-7);
width: var(--pv-size-base-7);
}
.emotion-1 {
color: transparent;
width: 100%;
height: 100%;
object-fit: cover;
text-align: center;
text-indent: 10000px;
border-radius: 50%;
}
<div
class="emotion-0"
>
<img
class="emotion-1"
draggable="false"
src="https://images.unsplash.com/photo-1667489022797-ab608913feeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60"
/>
</div>
</DocumentFragment>
`;

exports[`<Avatar /> Avatar render variants should render initials with fn 1`] = `
exports[`<Avatar /> Avatar render variants should render 1 initial with a 1-word name 1`] = `
<DocumentFragment>
.emotion-0 {
background: var(--pv-color-gray-7);
Expand Down Expand Up @@ -472,7 +369,7 @@ exports[`<Avatar /> Avatar render variants should render initials with fn 1`] =
</DocumentFragment>
`;

exports[`<Avatar /> sizes size "large" 1`] = `
exports[`<Avatar /> Avatar render variants should render as default 1`] = `
<DocumentFragment>
.emotion-0 {
background: var(--pv-color-gray-7);
Expand All @@ -494,8 +391,8 @@ exports[`<Avatar /> sizes size "large" 1`] = `
-webkit-justify-content: center;
justify-content: center;
position: relative;
height: var(--pv-size-base-8);
width: var(--pv-size-base-8);
height: var(--pv-size-base-7);
width: var(--pv-size-base-7);
}
<div
Expand All @@ -518,7 +415,7 @@ exports[`<Avatar /> sizes size "large" 1`] = `
</DocumentFragment>
`;

exports[`<Avatar /> sizes size "medium" 1`] = `
exports[`<Avatar /> Avatar render variants should render as image 1`] = `
<DocumentFragment>
.emotion-0 {
background: var(--pv-color-gray-7);
Expand All @@ -544,27 +441,29 @@ exports[`<Avatar /> sizes size "medium" 1`] = `
width: var(--pv-size-base-7);
}
.emotion-1 {
color: transparent;
width: 100%;
height: 100%;
object-fit: cover;
text-align: center;
text-indent: 10000px;
border-radius: 50%;
}
<div
class="emotion-0"
>
<svg
fill="none"
role="img"
viewBox="0 0 10 13"
width="10"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2.998 3.174c0 1.594 1 2.674 2 2.674s2-1.08 2-2.674c0-1.595-1-2.674-2-2.674s-2 1.08-2 2.674zM5 8.858c-1.249 0-2.383-.448-3.308-1.146C.95 8.064.5 8.878.5 9.812v2.12h9V9.81c0-.918-.46-1.746-1.193-2.098C7.383 8.41 6.25 8.858 5 8.858z"
fill="#fff"
stroke="#fff"
/>
</svg>
<img
class="emotion-1"
draggable="false"
src="https://images.unsplash.com/photo-1667489022797-ab608913feeb?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5fHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=800&q=60"
/>
</div>
</DocumentFragment>
`;

exports[`<Avatar /> sizes size "small" 1`] = `
exports[`<Avatar /> Avatar render variants should render initials with fn 1`] = `
<DocumentFragment>
.emotion-0 {
background: var(--pv-color-gray-7);
Expand All @@ -586,26 +485,29 @@ exports[`<Avatar /> sizes size "small" 1`] = `
-webkit-justify-content: center;
justify-content: center;
position: relative;
height: var(--pv-size-base-6);
width: var(--pv-size-base-6);
height: var(--pv-size-base-7);
width: var(--pv-size-base-7);
}
.emotion-1 {
margin: 0;
color: var(--pv-color-white);
font-weight: var(--pv-text-b1-weight);
font-size: var(--pv-text-b1-size);
line-height: var(--pv-text-b1-height);
letter-spacing: var(--pv-text-b1-spacing);
}
<div
class="emotion-0"
>
<svg
fill="none"
<p
aria-label="First"
class="emotion-1"
role="img"
viewBox="0 0 10 13"
width="10"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M2.998 3.174c0 1.594 1 2.674 2 2.674s2-1.08 2-2.674c0-1.595-1-2.674-2-2.674s-2 1.08-2 2.674zM5 8.858c-1.249 0-2.383-.448-3.308-1.146C.95 8.064.5 8.878.5 9.812v2.12h9V9.81c0-.918-.46-1.746-1.193-2.098C7.383 8.41 6.25 8.858 5 8.858z"
fill="#fff"
stroke="#fff"
/>
</svg>
F
</p>
</div>
</DocumentFragment>
`;
37 changes: 17 additions & 20 deletions packages/react-components/src/Avatar/avatar.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ describe('<Avatar />', () => {
expect(asFragment()).toMatchSnapshot();
});

it('should render 1 initial with a 1-word name', () => {
it('should render 1 initial with a 1-word name', () => {
const { asFragment } = render(<Avatar name="First" />);

expect(screen.getByText('F')).toBeInTheDocument();
Expand Down Expand Up @@ -68,6 +68,21 @@ describe('<Avatar />', () => {

expect(asFragment()).toMatchSnapshot();
});

it('shoul change initials render element', () => {
const { asFragment } = render(
<Avatar
name="First"
renderInitials={(props) => (
// eslint-disable-next-line jsx-a11y/heading-has-content
<h1 {...props} />
)}
/>,
);

expect(screen.getByText('F')).toBeInTheDocument();
expect(asFragment()).toMatchSnapshot();
});
});

describe('Avatar render sizes', () => {
Expand All @@ -78,7 +93,7 @@ describe('<Avatar />', () => {
];

sizes.forEach((size) => {
it(`should render a "${size}" size`, () => {
it(`size "${size}"`, () => {
const { asFragment } = render(
<Avatar size={size} />,
);
Expand Down Expand Up @@ -113,22 +128,4 @@ describe('<Avatar />', () => {
expect(handleLoad).toHaveBeenCalledTimes(1);
});
});

describe('sizes', () => {
const sizes: Array<React.ComponentProps<typeof Avatar>['size']> = [
'small',
'medium',
'large',
];

sizes.forEach((size) => {
it(`size "${size}"`, () => {
const { asFragment } = render(
<Avatar size={size} />,
);

expect(asFragment()).toMatchSnapshot();
});
});
});
});

0 comments on commit af60902

Please sign in to comment.