Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

website: Update avatar documentation & demos #963

Merged
merged 10 commits into from
Feb 8, 2023
Merged

website: Update avatar documentation & demos #963

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
894ead6
Initial push.
FlyersPh9 Jan 6, 2023
f40a3a4
Merge branch 'main' into jon/documentation-site-avatar
FlyersPh9 Jan 10, 2023
4d2a0da
Merge branch 'main' into jon/documentation-site-avatar
FlyersPh9 Jan 12, 2023
4f9e38d
Merge branch 'main' into jon/documentation-site-avatar
FlyersPh9 Feb 7, 2023
04a2baa
Merge branch 'main' into jon/documentation-site-avatar
FlyersPh9 Feb 7, 2023
ef33bc5
Merge branch 'main' into jon/documentation-site-avatar
FlyersPh9 Feb 7, 2023
78ec788
Replacing Greg Bentley with Robbie Robot.
FlyersPh9 Feb 7, 2023
65ac395
Replacing SVG used in icon demos.
FlyersPh9 Feb 7, 2023
88cbb86
Use variable for data URI image.
FlyersPh9 Feb 8, 2023
8a04214
Merge branch 'main' into jon/documentation-site-avatar
FlyersPh9 Feb 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 34 additions & 0 deletions apps/website/src/examples/Avatar.group.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import * as React from 'react';
import { AvatarGroup, Avatar, getUserColor } from '@itwin/itwinui-react';

export default () => {
return (
<AvatarGroup stacked={false} iconSize='x-large'>
<Avatar
abbreviation='TR'
backgroundColor={getUserColor('Terry Rivers')}
title='Terry Rivers'
/>
<Avatar
abbreviation='RM'
backgroundColor={getUserColor('Robin Mercer')}
title='Robin Mercer'
/>
<Avatar abbreviation='MV' backgroundColor={getUserColor('Morgan Vera')} title='Morgan Vera' />
<Avatar
abbreviation='JM'
backgroundColor={getUserColor('Jean Mullins')}
title='Jean Mullins'
/>
<Avatar
abbreviation='AM'
backgroundColor={getUserColor('Ashley Miles')}
title='Ashley Miles'
/>
</AvatarGroup>
);
};
34 changes: 34 additions & 0 deletions apps/website/src/examples/Avatar.groupanimated.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import * as React from 'react';
import { AvatarGroup, Avatar, getUserColor } from '@itwin/itwinui-react';

export default () => {
return (
<AvatarGroup animated iconSize='x-large'>
<Avatar
abbreviation='TR'
backgroundColor={getUserColor('Terry Rivers')}
title='Terry Rivers'
/>
<Avatar
abbreviation='RM'
backgroundColor={getUserColor('Robin Mercer')}
title='Robin Mercer'
/>
<Avatar abbreviation='MV' backgroundColor={getUserColor('Morgan Vera')} title='Morgan Vera' />
<Avatar
abbreviation='JM'
backgroundColor={getUserColor('Jean Mullins')}
title='Jean Mullins'
/>
<Avatar
abbreviation='AM'
backgroundColor={getUserColor('Ashley Miles')}
title='Ashley Miles'
/>
</AvatarGroup>
);
};
76 changes: 76 additions & 0 deletions apps/website/src/examples/Avatar.groupoverflow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import * as React from 'react';
import { AvatarGroup, Avatar, getUserColor } from '@itwin/itwinui-react';

export default () => {
return (
<AvatarGroup iconSize='x-large'>
<Avatar
abbreviation='TR'
backgroundColor={getUserColor('Terry Rivers')}
title='Terry Rivers'
/>
<Avatar
abbreviation='RM'
backgroundColor={getUserColor('Robin Mercer')}
title='Robin Mercer'
/>
<Avatar abbreviation='MV' backgroundColor={getUserColor('Morgan Vera')} title='Morgan Vera' />
<Avatar
abbreviation='JM'
backgroundColor={getUserColor('Jean Mullins')}
title='Jean Mullins'
/>
<Avatar
abbreviation='AM'
backgroundColor={getUserColor('Ashley Miles')}
title='Ashley Miles'
/>
<Avatar
abbreviation='TR'
backgroundColor={getUserColor('Terry Rivers')}
title='Terry Rivers'
/>
<Avatar
abbreviation='RM'
backgroundColor={getUserColor('Robin Mercer')}
title='Robin Mercer'
/>
<Avatar abbreviation='MV' backgroundColor={getUserColor('Morgan Vera')} title='Morgan Vera' />
<Avatar
abbreviation='JM'
backgroundColor={getUserColor('Jean Mullins')}
title='Jean Mullins'
/>
<Avatar
abbreviation='AM'
backgroundColor={getUserColor('Ashley Miles')}
title='Ashley Miles'
/>
<Avatar
abbreviation='TR'
backgroundColor={getUserColor('Terry Rivers')}
title='Terry Rivers'
/>
<Avatar
abbreviation='RM'
backgroundColor={getUserColor('Robin Mercer')}
title='Robin Mercer'
/>
<Avatar abbreviation='MV' backgroundColor={getUserColor('Morgan Vera')} title='Morgan Vera' />
<Avatar
abbreviation='JM'
backgroundColor={getUserColor('Jean Mullins')}
title='Jean Mullins'
/>
<Avatar
abbreviation='AM'
backgroundColor={getUserColor('Ashley Miles')}
title='Ashley Miles'
/>
</AvatarGroup>
);
};
34 changes: 34 additions & 0 deletions apps/website/src/examples/Avatar.groupstacked.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import * as React from 'react';
import { AvatarGroup, Avatar, getUserColor } from '@itwin/itwinui-react';

export default () => {
return (
<AvatarGroup iconSize='x-large'>
<Avatar
abbreviation='TR'
backgroundColor={getUserColor('Terry Rivers')}
title='Terry Rivers'
/>
<Avatar
abbreviation='RM'
backgroundColor={getUserColor('Robin Mercer')}
title='Robin Mercer'
/>
<Avatar abbreviation='MV' backgroundColor={getUserColor('Morgan Vera')} title='Morgan Vera' />
<Avatar
abbreviation='JM'
backgroundColor={getUserColor('Jean Mullins')}
title='Jean Mullins'
/>
<Avatar
abbreviation='AM'
backgroundColor={getUserColor('Ashley Miles')}
title='Ashley Miles'
/>
</AvatarGroup>
);
};
19 changes: 19 additions & 0 deletions apps/website/src/examples/Avatar.icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import * as React from 'react';
import { Avatar, getUserColor } from '@itwin/itwinui-react';
import { SvgBentleySystems } from '@itwin/itwinui-icons-react';

export default () => {
return (
<Avatar
abbreviation='BS'
backgroundColor={getUserColor('Bentley Systems')}
image={<SvgBentleySystems className='iui-icon' aria-hidden='true' />}
mayank99 marked this conversation as resolved.
Show resolved Hide resolved
size='x-large'
title='Bentley Systems'
/>
);
};
17 changes: 17 additions & 0 deletions apps/website/src/examples/Avatar.initials.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import * as React from 'react';
import { Avatar, getUserColor } from '@itwin/itwinui-react';

export default () => {
return (
<Avatar
abbreviation='TR'
backgroundColor={getUserColor('Terry Rivers')}
size='x-large'
title='Terry Rivers'
/>
);
};
43 changes: 35 additions & 8 deletions apps/website/src/examples/Avatar.main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,43 @@
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import * as React from 'react';
import { AvatarGroup, Avatar } from '@itwin/itwinui-react';
import { Avatar, getUserColor } from '@itwin/itwinui-react';
import { SvgUser } from '@itwin/itwinui-icons-react';

export default () => {
return (
<AvatarGroup animated iconSize='medium'>
<Avatar abbreviation='TR' backgroundColor='#6AB9EC' title='Terry Rivers' />
<Avatar abbreviation='RM' backgroundColor='#C8C2B4' title='Robin Mercer' />
<Avatar abbreviation='MV' backgroundColor='#73C7C1' title='Morgan Vera' />
<Avatar abbreviation='JM' backgroundColor='#A3779F' title='Jean Mullins' />
<Avatar abbreviation='AM' backgroundColor='#73C7C1' title='Ashley Miles' />
</AvatarGroup>
<div
style={{
display: 'flex',
gap: 'var(--iui-size-s)',
placeItems: 'center',
}}
>
<Avatar
abbreviation='TR'
backgroundColor={getUserColor('Terry Rivers')}
title='Terry Rivers'
size='x-large'
status='online'
/>
<Avatar
abbreviation='US'
backgroundColor={getUserColor('Unknown user')}
image={<SvgUser className='iui-icon' aria-hidden='true' />}
title='Unknown user'
size='x-large'
status='away'
/>
<Avatar
abbreviation='GB'
backgroundColor={getUserColor('Greg Bentley')}
image={
<img src='https://www.bentley.com/wp-content/uploads/greg-bentley-hr-profile.jpeg' />
}
title='Greg Bentley'
size='x-large'
status='busy'
/>
</div>
);
};
18 changes: 18 additions & 0 deletions apps/website/src/examples/Avatar.picture.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import * as React from 'react';
import { Avatar, getUserColor } from '@itwin/itwinui-react';

export default () => {
return (
<Avatar
abbreviation='GB'
backgroundColor={getUserColor('Greg Bentley')}
image={<img src='https://www.bentley.com/wp-content/uploads/greg-bentley-hr-profile.jpeg' />}
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where can I host an image to use instead of this one from bentley.com? I don't want to use https://itwin.github.io/iTwinUI/css/assets/user-placeholder.png because it looks too close to the SVG examples.

Copy link
Contributor

@mayank99 mayank99 Feb 7, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

you can put it in the public folder under apps/website and it should be available at this url: https://itwinui.bentley.com/<your-file-name.jpg> (after it's deployed)

if you decide to do this, i would recommend not using a human face (even if it's AI-generated). Instead, you could use something like this: https://stock.adobe.com/search?k=robot+avatar&asset_id=359684982

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh i just realized this is for the demos. we probably don't want to show the full domain in the code, so what you really need is to put an image inside the sandbox.

there might be cleaner ways of doing this, but one easy option is to convert it to a data uri and use it in the src attribute of the img.

<img src='data:image/...'>

the url is not the focus, so it gets the point across (that you can use an tag)

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good suggestion, replaced with that robot & used a data URI.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh wow that url is incredibly long. maybe move it out to a variable

const imgSrc = `data:image/...`;

<img src={imgSrc} />

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

move it out to a variable

bump

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just pushed this change, let me know if I did it right.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

looks good

size='x-large'
title='Greg Bentley'
/>
);
};
43 changes: 43 additions & 0 deletions apps/website/src/examples/Avatar.sizes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import * as React from 'react';
import { Avatar, getUserColor } from '@itwin/itwinui-react';

export default () => {
return (
<div
style={{
display: 'flex',
gap: 'var(--iui-size-s)',
placeItems: 'center',
}}
>
<Avatar
abbreviation='TR'
backgroundColor={getUserColor('Terry Rivers')}
size='small'
title='Terry Rivers'
/>
<Avatar
abbreviation='RM'
backgroundColor={getUserColor('Robin Mercer')}
size='medium'
title='Robin Mercer'
/>
<Avatar
abbreviation='MV'
backgroundColor={getUserColor('Morgan Vera')}
size='large'
title='Morgan Vera'
/>
<Avatar
abbreviation='JM'
backgroundColor={getUserColor('Jean Mullins')}
size='x-large'
title='Jean Mullins'
/>
</div>
);
};
47 changes: 47 additions & 0 deletions apps/website/src/examples/Avatar.statuses.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
/*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import * as React from 'react';
import { Avatar, getUserColor } from '@itwin/itwinui-react';

export default () => {
return (
<div
style={{
display: 'flex',
gap: 'var(--iui-size-s)',
placeItems: 'center',
}}
>
<Avatar
abbreviation='TR'
backgroundColor={getUserColor('Terry Rivers')}
title='Terry Rivers'
size='x-large'
status='online'
/>
<Avatar
abbreviation='RM'
backgroundColor={getUserColor('Robin Mercer')}
title='Robin Mercer'
size='x-large'
status='away'
/>
<Avatar
abbreviation='JM'
backgroundColor={getUserColor('Jean Mullins')}
title='Jean Mullins'
size='x-large'
status='busy'
/>
<Avatar
abbreviation='AM'
backgroundColor={getUserColor('Ashley Miles')}
title='Ashley Miles'
size='x-large'
status='offline'
/>
</div>
);
};
Loading