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.

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

feat(useravatar): create useravatar web component #6823

Merged
merged 13 commits into from
Feb 17, 2025
Merged
Prev Previous commit
Next Next commit
feat(useravatar): create useravatar web component
anamikaanu96 committed Jan 31, 2025

Verified

This commit was signed with the committer’s verified signature.
nsrip-dd Nick Ripley
commit f6a5e00a73b6a6b2a5c22e51978f16730f32af5d
Original file line number Diff line number Diff line change
@@ -14,6 +14,10 @@ import { prefix } from '../../globals/settings';

import { POPOVER_ALIGNMENT } from '@carbon/web-components/es/components/popover/defs.js';
import styles from './story-styles.scss?lit';
import Group from '@carbon/web-components/es/icons/group/16';
import User from '@carbon/web-components/es/icons/user/16';
import Add from '@carbon/web-components/es/icons/add/16';
//import Group from '@carbon/icons/lib/group/16';

const storyPrefix = 'user-avatar-stories__';

@@ -32,23 +36,28 @@ const defaultTemplate = {
args: {
tooltipAlignment: POPOVER_ALIGNMENT.RIGHT,
tooltipText: 'TW, Thomas J. Watson user profile',
name: 'Thomas J Watson',
renderIcon: Group,
},
argTypes: {
tooltipAlignment: {
control: 'select',
description:
'Specify the alignment of the tooltip to the icon-only button. Can be one of: start, center, or end.',
description: 'Specify the alignment of the tooltip.',
options: tooltipAlignments,
},
tooltipText: {
control: 'text',
description: 'Specify the text of the tooltip for icon-only buttons.',
description: 'Specify the text of the tooltip',
},
name: {
control: 'text',
description: 'Specify the name of the user',
},
renderIcon: {
control: 'select',
description: 'Specify the renderIcon for user',
options: ['No icon', 'User', 'Group', 'Add'],
mapping: { 'No icon': '', User: User, Group: Group, Add: Add },
},
},
render: (args) => {
return html`
@@ -67,6 +76,7 @@ const defaultTemplate = {
tooltip-alignment=${args.tooltipAlignment}
tooltip-text=${args.tooltipText}
name=${args.name}
.renderIcon=${args.renderIcon}
>
</c4p-user-avatar>
`;
Original file line number Diff line number Diff line change
@@ -15,8 +15,7 @@ import HostListenerMixin from '@carbon/web-components/es/globals/mixins/host-lis
import { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
import styles from './user-avatar.scss?lit';
import '@carbon/web-components/es/components/tooltip/index.js';

import { classMap } from 'lit/directives/class-map.js';
import User from '@carbon/web-components/es/icons/user/16';

const blockClass = `${prefix}--user-avatar`;
/**
@@ -45,21 +44,32 @@ class CDSUseravatar extends HostListenerMixin(LitElement) {
@property({ reflect: true })
name;

/**
* Provide a custom icon to use if you need to use an icon other than the default one
*/
@property()
renderIcon;

getItem = () => {
const parts = this.name?.split(' ') || [];
const firstChar = parts[0].charAt(0).toUpperCase();
const secondChar = parts[0].charAt(1).toUpperCase();
if (parts.length === 1) {
return firstChar + secondChar;
}
const lastChar = parts[parts.length - 1].charAt(0).toUpperCase();
const initials = [firstChar];
if (lastChar) {
initials.push(lastChar);
}
console.log(initials);
if (this.name) {
const parts = this.name?.split(' ') || [];
const firstChar = parts[0].charAt(0).toUpperCase();
const secondChar = parts[0].charAt(1).toUpperCase();
if (parts.length === 1) {
return firstChar + secondChar;
}
const lastChar = parts[parts.length - 1].charAt(0).toUpperCase();
const initials = [firstChar];
if (lastChar) {
initials.push(lastChar);
}

return ''.concat(...initials);
return ''.concat(...initials);
} else if (this.renderIcon) {
return html`${this.renderIcon()}`;
} else {
return html`${User({ slot: 'icon' })} `;
}
};

Avatar = () => html`<div>${this.getItem()}</div>`;