Skip to content

Commit

Permalink
Fix for placecage image service which no longer active (#869)
Browse files Browse the repository at this point in the history 
* fix for placecage image service which no longer active

* updates avatar tests
  • Loading branch information
@egoens
egoens authored Jan 6, 2023
1 parent 1e1b25f commit a04e811
Show file tree
Hide file tree
Showing 5 changed files with 57 additions and 57 deletions.
24 changes: 12 additions & 12 deletions packages/thumbprint-react/components/Avatar/__snapshots__/test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`EntityAvatar renders an image when the user has one 1`] = `
<EntityAvatar
imageUrl="//www.placecage.com/130/130"
imageUrl="//https://i.pravatar.cc/140"
initial="N"
>
<div
Expand All @@ -17,7 +17,7 @@ exports[`EntityAvatar renders an image when the user has one 1`] = `
<Image
className="squareAvatar"
height="48px"
src="//www.placecage.com/130/130"
src="//https://i.pravatar.cc/140"
>
<picture
className="picture squareAvatar"
Expand All @@ -41,7 +41,7 @@ exports[`EntityAvatar renders an image when the user has one 1`] = `
<noscript>
<img
alt=""
src="//www.placecage.com/130/130"
src="//https://i.pravatar.cc/140"
/>
</noscript>
</Image>
Expand Down Expand Up @@ -80,7 +80,7 @@ exports[`EntityAvatar renders the initials when the user has no image 1`] = `
exports[`adds the \`fullName\` as \`alt\` text when image is provided 1`] = `
<UserAvatar
fullName="Duck Goose"
imageUrl="//www.placecage.com/130/130"
imageUrl="//https://i.pravatar.cc/140"
>
<div
className="root rootSmall"
Expand All @@ -95,7 +95,7 @@ exports[`adds the \`fullName\` as \`alt\` text when image is provided 1`] = `
alt="Avatar for Duck Goose"
className="circleAvatar"
height="48px"
src="//www.placecage.com/130/130"
src="//https://i.pravatar.cc/140"
>
<picture
className="picture circleAvatar"
Expand All @@ -119,7 +119,7 @@ exports[`adds the \`fullName\` as \`alt\` text when image is provided 1`] = `
<noscript>
<img
alt="Avatar for Duck Goose"
src="//www.placecage.com/130/130"
src="//https://i.pravatar.cc/140"
/>
</noscript>
</Image>
Expand Down Expand Up @@ -157,7 +157,7 @@ exports[`adds the \`fullName\` as \`title\` text 1`] = `
exports[`adds the \`fullName\` as \`title\` text 2`] = `
<UserAvatar
fullName="Duck Goose"
imageUrl="//www.placecage.com/130/130"
imageUrl="//https://i.pravatar.cc/140"
>
<div
className="root rootSmall"
Expand All @@ -172,7 +172,7 @@ exports[`adds the \`fullName\` as \`title\` text 2`] = `
alt="Avatar for Duck Goose"
className="circleAvatar"
height="48px"
src="//www.placecage.com/130/130"
src="//https://i.pravatar.cc/140"
>
<picture
className="picture circleAvatar"
Expand All @@ -196,7 +196,7 @@ exports[`adds the \`fullName\` as \`title\` text 2`] = `
<noscript>
<img
alt="Avatar for Duck Goose"
src="//www.placecage.com/130/130"
src="//https://i.pravatar.cc/140"
/>
</noscript>
</Image>
Expand Down Expand Up @@ -639,7 +639,7 @@ exports[`renders an SVG when \`isChecked\` is true 2`] = `

exports[`renders an image when the user has one 1`] = `
<UserAvatar
imageUrl="//www.placecage.com/130/130"
imageUrl="//https://i.pravatar.cc/140"
initials="NC"
>
<div
Expand All @@ -654,7 +654,7 @@ exports[`renders an image when the user has one 1`] = `
<Image
className="circleAvatar"
height="48px"
src="//www.placecage.com/130/130"
src="//https://i.pravatar.cc/140"
>
<picture
className="picture circleAvatar"
Expand All @@ -678,7 +678,7 @@ exports[`renders an image when the user has one 1`] = `
<noscript>
<img
alt=""
src="//www.placecage.com/130/130"
src="//https://i.pravatar.cc/140"
/>
</noscript>
</Image>
Expand Down
8 changes: 4 additions & 4 deletions packages/thumbprint-react/components/Avatar/test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { mount } from 'enzyme';
import { UserAvatar, EntityAvatar } from './index';

test('renders an image when the user has one', (): void => {
const wrapper = mount(<UserAvatar imageUrl="//www.placecage.com/130/130" initials="NC" />);
const wrapper = mount(<UserAvatar imageUrl="//https://i.pravatar.cc/140" initials="NC" />);
expect(wrapper).toMatchSnapshot();
});

Expand All @@ -16,7 +16,7 @@ test('renders the initials when the user has no image', (): void => {
test('adds the `fullName` as `title` text', (): void => {
const wrapper = mount(<UserAvatar fullName="Duck Goose" />);
const wrapperWithImage = mount(
<UserAvatar fullName="Duck Goose" imageUrl="//www.placecage.com/130/130" />,
<UserAvatar fullName="Duck Goose" imageUrl="//https://i.pravatar.cc/140" />,
);
const wrapperWithInitials = mount(<UserAvatar fullName="Duck Goose" initials="DG" />);

Expand All @@ -30,7 +30,7 @@ test('adds the `fullName` as `title` text', (): void => {

test('adds the `fullName` as `alt` text when image is provided', (): void => {
const wrapper = mount(
<UserAvatar fullName="Duck Goose" imageUrl="//www.placecage.com/130/130" />,
<UserAvatar fullName="Duck Goose" imageUrl="//https://i.pravatar.cc/140" />,
);
expect(wrapper.find('Image').prop('alt')).toContain('Duck Goose');
expect(wrapper).toMatchSnapshot();
Expand Down Expand Up @@ -91,7 +91,7 @@ test('renders checkmark SVG when `isChecked` and `isOnline` are true', (): void
});

test('EntityAvatar renders an image when the user has one', (): void => {
const wrapper = mount(<EntityAvatar imageUrl="//www.placecage.com/130/130" initial="N" />);
const wrapper = mount(<EntityAvatar imageUrl="//https://i.pravatar.cc/140" initial="N" />);
expect(wrapper).toMatchSnapshot();
});

Expand Down
54 changes: 27 additions & 27 deletions www/src/pages/components/avatar/react/index.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,10 +19,10 @@ Avatars are available as two components: `UserAvatar` and `EntityAvatar`.
```jsx
<div className="flex">
<div className="mr3">
<EntityAvatar imageUrl="https://www.placecage.com/640/480" size="xlarge" />
<EntityAvatar imageUrl="https://i.pravatar.cc/140" size="xlarge" />
</div>
<div>
<UserAvatar imageUrl="https://www.placecage.com/640/480" size="xlarge" />
<UserAvatar imageUrl="https://i.pravatar.cc/140" size="xlarge" />
</div>
</div>
```
Expand All @@ -37,36 +37,36 @@ Both `UserAvatar` and `EntityAvatar` are available in five sizes ranging from `x
<>
<div className="flex items-center mb4">
<div className="mr3">
<UserAvatar imageUrl="https://www.placecage.com/640/480" size="xlarge" />
<UserAvatar imageUrl="https://i.pravatar.cc/140" size="xlarge" />
</div>
<div className="mr3">
<UserAvatar imageUrl="https://www.placecage.com/640/480" size="large" />
<UserAvatar imageUrl="https://i.pravatar.cc/140" size="large" />
</div>
<div className="mr3">
<UserAvatar imageUrl="https://www.placecage.com/640/480" size="medium" />
<UserAvatar imageUrl="https://i.pravatar.cc/140" size="medium" />
</div>
<div className="mr3">
<UserAvatar imageUrl="https://www.placecage.com/640/480" size="small" />
<UserAvatar imageUrl="https://i.pravatar.cc/140" size="small" />
</div>
<div className="mr3">
<UserAvatar imageUrl="https://www.placecage.com/640/480" size="xsmall" />
<UserAvatar imageUrl="https://i.pravatar.cc/140" size="xsmall" />
</div>
</div>
<div className="flex items-center">
<div className="mr3">
<EntityAvatar imageUrl="https://www.placecage.com/640/480" size="xlarge" />
<EntityAvatar imageUrl="https://i.pravatar.cc/140" size="xlarge" />
</div>
<div className="mr3">
<EntityAvatar imageUrl="https://www.placecage.com/640/480" size="large" />
<EntityAvatar imageUrl="https://i.pravatar.cc/140" size="large" />
</div>
<div className="mr3">
<EntityAvatar imageUrl="https://www.placecage.com/640/480" size="medium" />
<EntityAvatar imageUrl="https://i.pravatar.cc/140" size="medium" />
</div>
<div className="mr3">
<EntityAvatar imageUrl="https://www.placecage.com/640/480" size="small" />
<EntityAvatar imageUrl="https://i.pravatar.cc/140" size="small" />
</div>
<div className="mr3">
<EntityAvatar imageUrl="https://www.placecage.com/640/480" size="xsmall" />
<EntityAvatar imageUrl="https://i.pravatar.cc/140" size="xsmall" />
</div>
</div>
</>
Expand Down Expand Up @@ -133,37 +133,37 @@ This badge indicates that a user or entity is online.
<div>
<div className="flex items-center mb4">
<div className="mr2">
<UserAvatar imageUrl="https://www.placecage.com/640/480" isOnline size="xlarge" />
<UserAvatar imageUrl="https://i.pravatar.cc/140" isOnline size="xlarge" />
</div>
<div className="mr2">
<UserAvatar imageUrl="https://www.placecage.com/640/480" isOnline size="large" />
<UserAvatar imageUrl="https://i.pravatar.cc/140" isOnline size="large" />
</div>
<div className="mr2">
<UserAvatar imageUrl="https://www.placecage.com/640/480" isOnline size="medium" />
<UserAvatar imageUrl="https://i.pravatar.cc/140" isOnline size="medium" />
</div>
<div className="mr2">
<UserAvatar imageUrl="https://www.placecage.com/640/480" isOnline size="small" />
<UserAvatar imageUrl="https://i.pravatar.cc/140" isOnline size="small" />
</div>
<div className="mr2">
<UserAvatar imageUrl="https://www.placecage.com/640/480" isOnline size="xsmall" />
<UserAvatar imageUrl="https://i.pravatar.cc/140" isOnline size="xsmall" />
</div>
</div>

<div className="flex items-center">
<div className="mr2">
<EntityAvatar imageUrl="https://www.placecage.com/640/480" isOnline size="xlarge" />
<EntityAvatar imageUrl="https://i.pravatar.cc/140" isOnline size="xlarge" />
</div>
<div className="mr2">
<EntityAvatar imageUrl="https://www.placecage.com/640/480" isOnline size="large" />
<EntityAvatar imageUrl="https://i.pravatar.cc/140" isOnline size="large" />
</div>
<div className="mr2">
<EntityAvatar imageUrl="https://www.placecage.com/640/480" isOnline size="medium" />
<EntityAvatar imageUrl="https://i.pravatar.cc/140" isOnline size="medium" />
</div>
<div className="mr2">
<EntityAvatar imageUrl="https://www.placecage.com/640/480" isOnline size="small" />
<EntityAvatar imageUrl="https://i.pravatar.cc/140" isOnline size="small" />
</div>
<div className="mr2">
<EntityAvatar imageUrl="https://www.placecage.com/640/480" isOnline size="xsmall" />
<EntityAvatar imageUrl="https://i.pravatar.cc/140" isOnline size="xsmall" />
</div>
</div>
</div>
Expand All @@ -180,19 +180,19 @@ This badge indicates that a user or entity is online.
```jsx
<div className="flex items-center mb4">
<div className="mr2">
<UserAvatar imageUrl="https://www.placecage.com/640/480" isChecked size="xlarge" />
<UserAvatar imageUrl="https://i.pravatar.cc/140" isChecked size="xlarge" />
</div>
<div className="mr2">
<UserAvatar imageUrl="https://www.placecage.com/640/480" isChecked size="large" />
<UserAvatar imageUrl="https://i.pravatar.cc/140" isChecked size="large" />
</div>
<div className="mr2">
<UserAvatar imageUrl="https://www.placecage.com/640/480" isChecked size="medium" />
<UserAvatar imageUrl="https://i.pravatar.cc/140" isChecked size="medium" />
</div>
<div className="mr2">
<UserAvatar imageUrl="https://www.placecage.com/640/480" isChecked size="small" />
<UserAvatar imageUrl="https://i.pravatar.cc/140" isChecked size="small" />
</div>
<div className="mr2">
<UserAvatar imageUrl="https://www.placecage.com/640/480" isChecked size="xsmall" />
<UserAvatar imageUrl="https://i.pravatar.cc/140" isChecked size="xsmall" />
</div>
</div>
```
Expand Down
14 changes: 7 additions & 7 deletions www/src/pages/components/avatar/scss/index.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,39 +34,39 @@ import Alert from 'components/alert';

```html
<div class="tp-avatar tp-avatar--xlarge">
<img src="https://www.placecage.com/130/130" class="tp-avatar__img" />
<img src="https://i.pravatar.cc/140" class="tp-avatar__img" />
</div>
```

### Large

```html
<div class="tp-avatar tp-avatar--large">
<img src="https://www.placecage.com/130/130" class="tp-avatar__img" />
<img src="https://i.pravatar.cc/140" class="tp-avatar__img" />
</div>
```

### Medium

```html
<div class="tp-avatar tp-avatar--medium">
<img src="https://www.placecage.com/130/130" class="tp-avatar__img" />
<img src="https://i.pravatar.cc/140" class="tp-avatar__img" />
</div>
```

### Small

```html
<div class="tp-avatar tp-avatar--small">
<img src="https://www.placecage.com/130/130" class="tp-avatar__img" />
<img src="https://i.pravatar.cc/140" class="tp-avatar__img" />
</div>
```

### Extra Small

```html
<div class="tp-avatar tp-avatar--xsmall">
<img src="https://www.placecage.com/130/130" class="tp-avatar__img" />
<img src="https://i.pravatar.cc/140" class="tp-avatar__img" />
</div>
```

Expand All @@ -81,7 +81,7 @@ import Alert from 'components/alert';

```html
<div class="tp-avatar tp-avatar--xlarge">
<img src="//www.placecage.com/130/130" class="tp-avatar__img" />
<img src="https://i.pravatar.cc/140" class="tp-avatar__img" />
<div class="tp-avatar__badge tp-avatar__badge--hired" />
</div>
```
Expand All @@ -90,7 +90,7 @@ import Alert from 'components/alert';

```html
<div class="tp-avatar tp-avatar--xlarge">
<img src="//www.placecage.com/130/130" class="tp-avatar__img" />
<img src="https://i.pravatar.cc/140" class="tp-avatar__img" />
<div class="tp-avatar__badge tp-avatar__badge--notification">99</div>
</div>
```
Expand Down
14 changes: 7 additions & 7 deletions www/src/pages/components/avatar/usage/index.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,13 @@ One of the defining guidelines for avatars and their shape is what the avatar is

<div className="grid mw8 mt3">
<div className="col-4">
<EntityAvatar imageUrl="https://www.placecage.com/640/480" size="xlarge" />
<EntityAvatar imageUrl="https://i.pravatar.cc/140" size="xlarge" />
<div className="tp-body-3 mt2 black-300">
<div>Entity Avatar</div>
</div>
</div>
<div className="col-4">
<UserAvatar imageUrl="https://www.placecage.com/640/480" size="xlarge" />
<UserAvatar imageUrl="https://i.pravatar.cc/140" size="xlarge" />
<div className="tp-body-3 mt2 black-300">
<div>User Avatar</div>
</div>
Expand All @@ -55,23 +55,23 @@ One of the defining guidelines for avatars and their shape is what the avatar is

<div className="flex items-baseline">
<div className="mr4">
<EntityAvatar imageUrl="https://www.placecage.com/640/480" size="xlarge" />
<EntityAvatar imageUrl="https://i.pravatar.cc/140" size="xlarge" />
<div className="tp-body-3">Extra Large</div>
</div>
<div className="mr4">
<EntityAvatar imageUrl="https://www.placecage.com/640/480" size="large" />
<EntityAvatar imageUrl="https://i.pravatar.cc/140" size="large" />
<div className="tp-body-3">Large</div>
</div>
<div className="mr4">
<EntityAvatar imageUrl="https://www.placecage.com/640/480" size="medium" />
<EntityAvatar imageUrl="https://i.pravatar.cc/140" size="medium" />
<div className="tp-body-3">Medium</div>
</div>
<div className="mr4">
<EntityAvatar imageUrl="https://www.placecage.com/640/480" size="small" />
<EntityAvatar imageUrl="https://i.pravatar.cc/140" size="small" />
<div className="tp-body-3">Small</div>
</div>
<div className="mr4">
<EntityAvatar imageUrl="https://www.placecage.com/640/480" size="xsmall" />
<EntityAvatar imageUrl="https://i.pravatar.cc/140" size="xsmall" />
<div className="tp-body-3">Extra Small</div>
</div>
</div>
Expand Down

0 comments on commit a04e811

Please sign in to comment.