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 all 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 { SvgUser } from '@itwin/itwinui-icons-react';

export default () => {
return (
<Avatar
abbreviation='AU'
backgroundColor={getUserColor('Anonymous user')}
image={<SvgUser aria-hidden='true' />}
size='x-large'
title='Anonymous user'
/>
);
};
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'
/>
);
};
44 changes: 36 additions & 8 deletions apps/website/src/examples/Avatar.main.tsx
View file
Open in desktop

Large diffs are not rendered by default.

21 changes: 21 additions & 0 deletions apps/website/src/examples/Avatar.picture.tsx
View file
Open in desktop

Large diffs are not rendered by default.

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