Skip to content

Commit

Permalink
chore: update avatar presence on newMomentum property change (#1846)
Browse files Browse the repository at this point in the history
  • Loading branch information
@NotNestor
NotNestor authored Dec 6, 2024
1 parent 23a154a commit 5959d21
Show file tree
Hide file tree
Showing 4 changed files with 146 additions and 118 deletions.
2 changes: 1 addition & 1 deletion web-components/package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@momentum-ui/web-components",
"version": "2.16.5",
"version": "2.16.6",
"author": "Yana Harris",
"license": "MIT",
"repository": "https://github.com/momentum-design/momentum-ui.git",
Expand Down
257 changes: 142 additions & 115 deletions web-components/src/[sandbox]/examples/avatar.ts
View file
Original file line number Diff line number Diff line change
@@ -1,119 +1,146 @@
import "@/components/avatar/Avatar";
import "@/components/avatar/CompositeAvatar";
import "@/components/toggle-switch/ToggleSwitch";
import svg from "@img/profile.svg";
import { html } from "lit-element";
import { LitElement, customElement, html, internalProperty } from "lit-element";

export const avatarTemplate = html`
<h3>Basic Large Avatar</h3>
<md-avatar alt="avatar" title="Alyson Hoagland Pace" size="44"></md-avatar>
<md-avatar alt="avatar" title="Alyson Hoagland Pace" size="44" color="purple"></md-avatar>
<md-avatar alt="avatar" title="Alyson Hoagland Pace" size="44" color="mint"></md-avatar>
<md-avatar alt="avatar" title="Alyson Hoagland Pace" size="44" color="slate"></md-avatar>
<md-avatar alt="avatar" title="Alyson Hoagland Pace" size="44" color="gold"></md-avatar>
<md-avatar alt="avatar" title="Alyson Hoagland Pace" size="44" color="pink"></md-avatar>
<md-avatar alt="avatar" title="Alyson Hoagland Pace" size="44" color="lime"></md-avatar>
<h3>Medium Src Avatar</h3>
<md-avatar
alt="avatar"
title="Kevin Hyde"
size="52"
src="https://static.skillshare.com/uploads/users/7330753/user-image-large.png"
></md-avatar>
<h3>Small Avatar with Custom Image</h3>
<md-avatar alt="avatar" title="Kevin Hyde" size="18">
<img
src="https://st2.depositphotos.com/4967775/11323/v/950/depositphotos_113235752-stock-illustration-avatar-girls-icon-vector-woman.jpg"
/>
</md-avatar>
<h3>Medium Type with Custom SVG Image</h3>
<md-avatar alt="avatar" title="Kevin Hyde" size="40">
<img width="100" height="100" src=${svg} />
</md-avatar>
<h3>Icon Avatar with Color</h3>
<md-avatar alt="avatar" title="Warning Icon" size="80" color="mint" icon-name="warning_20"></md-avatar>
<md-avatar alt="avatar" title="Warning Icon" size="80" icon-name="bot-bold" newMomentum></md-avatar>
<h3>Icon Avatar Status</h3>
<md-avatar title="active" size="36" type="active"></md-avatar>
<md-avatar title="bot" size="36" type="bot"></md-avatar>
<md-avatar title="call" size="36" type="call"></md-avatar>
<md-avatar title="dnd" size="36" type="dnd"></md-avatar>
<md-avatar title="group" size="36" type="group"></md-avatar>
<md-avatar title="inactive" size="36" type="inactive"></md-avatar>
<md-avatar title="meeting" size="36" type="meeting"></md-avatar>
<md-avatar title="ooo" size="36" type="ooo"></md-avatar>
<md-avatar title="presenting" size="36" type="presenting"></md-avatar>
<md-avatar title="self" size="36" type="self"></md-avatar>
<md-avatar title="typing" size="36" type="typing"></md-avatar>
<md-avatar title="engaged" size="36" type="engaged"></md-avatar>
<md-avatar title="idle" size="36" type="idle"></md-avatar>
<md-avatar title="rona" size="36" type="rona"></md-avatar>
<h3>New Icon Avatar Status</h3>
<md-avatar title="active" size="48" type="active" newMomentum></md-avatar>
<md-avatar title="meeting" size="48" type="meeting" newMomentum></md-avatar>
<md-avatar title="schedule" size="48" type="schedule" newMomentum></md-avatar>
<md-avatar title="call" size="48" type="call" newMomentum></md-avatar>
<md-avatar title="dnd" size="48" type="dnd" newMomentum></md-avatar>
<md-avatar title="presenting" size="48" type="presenting" newMomentum></md-avatar>
<md-avatar title="quiet-hours" size="48" type="quiet-hours" newMomentum></md-avatar>
<md-avatar title="away" size="48" type="away" newMomentum></md-avatar>
<md-avatar title="ooo" size="48" type="ooo" newMomentum></md-avatar>
<md-avatar title="busy" size="48" type="busy" newMomentum></md-avatar>
<md-avatar title="on-mobile" size="48" type="on-mobile" newMomentum></md-avatar>
<md-avatar title="on-device" size="48" type="on-device" newMomentum></md-avatar>
<md-avatar title="on-hold" size="48" type="on-hold" newMomentum></md-avatar>
<md-avatar title="away-calling" size="48" type="away-calling" newMomentum></md-avatar>
<md-avatar title="active" size="48" type="active" newMomentum typing></md-avatar>
<md-avatar title="engaged" size="48" type="engaged" newMomentum></md-avatar>
<md-avatar title="rona" size="48" type="rona" newMomentum></md-avatar>
<md-avatar title="idle" size="48" type="idle" newMomentum></md-avatar>
<md-avatar title="inactive" size="48" type="inactive" newMomentum></md-avatar>
<h3>New Icon Avatar Status Size</h3>
<md-avatar title="active" size="24" type="active" newMomentum></md-avatar>
<md-avatar title="active" size="32" type="active" newMomentum></md-avatar>
<md-avatar title="active" size="40" type="active" newMomentum></md-avatar>
<md-avatar title="active" size="48" type="active" newMomentum></md-avatar>
<md-avatar title="active" size="64" type="active" newMomentum></md-avatar>
<md-avatar title="active" size="72" type="active" newMomentum></md-avatar>
<md-avatar title="active" size="88" type="active" newMomentum></md-avatar>
<md-avatar title="active" size="124" type="active" newMomentum></md-avatar>
<h3>New Icon Avatar Status legacy size</h3>
<md-avatar size="28" type="idle" title="2 8" newMomentum></md-avatar>
<md-avatar size="36" type="idle" title="3 6" newMomentum></md-avatar>
<md-avatar size="44" type="idle" title="4 4" newMomentum></md-avatar>
<md-avatar size="52" type="idle" title="5 2" newMomentum></md-avatar>
<md-avatar size="56" type="idle" title="5 6" newMomentum></md-avatar>
<br />
<br />
<md-avatar title="meeting" size="24" type="meeting" newMomentum></md-avatar>
<md-avatar title="meeting" size="32" type="meeting" newMomentum></md-avatar>
<md-avatar title="meeting" size="40" type="meeting" newMomentum></md-avatar>
<md-avatar title="meeting" size="48" type="meeting" newMomentum></md-avatar>
<md-avatar title="meeting" size="64" type="meeting" newMomentum></md-avatar>
<md-avatar title="meeting" size="72" type="meeting" newMomentum></md-avatar>
<md-avatar title="meeting" size="88" type="meeting" newMomentum></md-avatar>
<md-avatar title="meeting" size="124" type="meeting" newMomentum></md-avatar>
<h3>Icon Avatar Group</h3>
<md-avatar title="Icon" type="group"></md-avatar>
<h3>Avatar Self</h3>
<md-avatar title="Self" type="self" size="24"></md-avatar>
<md-avatar title="Self" type="self" size="28"></md-avatar>
<md-avatar title="Self" type="self" size="36"></md-avatar>
<md-avatar title="Self" type="self" size="40"></md-avatar>
<md-avatar title="Self" type="self" size="44"></md-avatar>
<md-avatar title="Self" type="self" size="56"></md-avatar>
<md-avatar title="Self" type="self" size="124"></md-avatar>
<h3>Icon Avatar Bot</h3>
<md-avatar type="bot" title="Tom Smith"></md-avatar>
<md-avatar type="bot" title="Tom Smith" newMomentum></md-avatar>
<h3>Icon Avatar Notification</h3>
<md-avatar has-notification type="active" size="72" title="Tom Smith"></md-avatar>
<h3>Icon Avatar Typing</h3>
<md-avatar type="typing" size="84" title="Tom Smith"></md-avatar>
<h3>Composite Avatar</h3>
<md-composite-avatar size="72">
<md-avatar type="typing" has-notification title="Tom Smith"></md-avatar>
<md-avatar type="dnd" title="Alyson Hoagland Pace"></md-avatar>
</md-composite-avatar>
<h3>Click Event Avatar</h3>
<md-avatar title="active" size="40" type="active" newMomentum role="button"></md-avatar>
`;
@customElement("avatar-template-sandbox")
export class AvatarTemplateSandbox extends LitElement {
@internalProperty()
private isNewMomentumEnabled = false;

private toggleMomentum = () => {
this.isNewMomentumEnabled = !this.isNewMomentumEnabled;
};

render() {
return html`
<h3>Basic Large Avatar</h3>
<md-avatar alt="avatar" title="Alyson Hoagland Pace" size="44"></md-avatar>
<md-avatar alt="avatar" title="Alyson Hoagland Pace" size="44" color="purple"></md-avatar>
<md-avatar alt="avatar" title="Alyson Hoagland Pace" size="44" color="mint"></md-avatar>
<md-avatar alt="avatar" title="Alyson Hoagland Pace" size="44" color="slate"></md-avatar>
<md-avatar alt="avatar" title="Alyson Hoagland Pace" size="44" color="gold"></md-avatar>
<md-avatar alt="avatar" title="Alyson Hoagland Pace" size="44" color="pink"></md-avatar>
<md-avatar alt="avatar" title="Alyson Hoagland Pace" size="44" color="lime"></md-avatar>
<h3>Medium Src Avatar</h3>
<md-avatar
alt="avatar"
title="Kevin Hyde"
size="52"
src="https://static.skillshare.com/uploads/users/7330753/user-image-large.png"
></md-avatar>
<h3>Small Avatar with Custom Image</h3>
<md-avatar alt="avatar" title="Kevin Hyde" size="18">
<img
src="https://st2.depositphotos.com/4967775/11323/v/950/depositphotos_113235752-stock-illustration-avatar-girls-icon-vector-woman.jpg"
/>
</md-avatar>
<h3>Medium Type with Custom SVG Image</h3>
<md-avatar alt="avatar" title="Kevin Hyde" size="40">
<img width="100" height="100" src=${svg} />
</md-avatar>
<h3>Icon Avatar with Color</h3>
<md-avatar alt="avatar" title="Warning Icon" size="80" color="mint" icon-name="warning_20"></md-avatar>
<md-avatar alt="avatar" title="Warning Icon" size="80" icon-name="bot-bold" newMomentum></md-avatar>
<h3>Icon Avatar Status</h3>
<md-avatar title="active" size="36" type="active"></md-avatar>
<md-avatar title="bot" size="36" type="bot"></md-avatar>
<md-avatar title="call" size="36" type="call"></md-avatar>
<md-avatar title="dnd" size="36" type="dnd"></md-avatar>
<md-avatar title="group" size="36" type="group"></md-avatar>
<md-avatar title="inactive" size="36" type="inactive"></md-avatar>
<md-avatar title="meeting" size="36" type="meeting"></md-avatar>
<md-avatar title="ooo" size="36" type="ooo"></md-avatar>
<md-avatar title="presenting" size="36" type="presenting"></md-avatar>
<md-avatar title="self" size="36" type="self"></md-avatar>
<md-avatar title="typing" size="36" type="typing"></md-avatar>
<md-avatar title="engaged" size="36" type="engaged"></md-avatar>
<md-avatar title="idle" size="36" type="idle"></md-avatar>
<md-avatar title="rona" size="36" type="rona"></md-avatar>
<h3>New Icon Avatar Status</h3>
<md-avatar title="active" size="48" type="active" newMomentum></md-avatar>
<md-avatar title="meeting" size="48" type="meeting" newMomentum></md-avatar>
<md-avatar title="schedule" size="48" type="schedule" newMomentum></md-avatar>
<md-avatar title="call" size="48" type="call" newMomentum></md-avatar>
<md-avatar title="dnd" size="48" type="dnd" newMomentum></md-avatar>
<md-avatar title="presenting" size="48" type="presenting" newMomentum></md-avatar>
<md-avatar title="quiet-hours" size="48" type="quiet-hours" newMomentum></md-avatar>
<md-avatar title="away" size="48" type="away" newMomentum></md-avatar>
<md-avatar title="ooo" size="48" type="ooo" newMomentum></md-avatar>
<md-avatar title="busy" size="48" type="busy" newMomentum></md-avatar>
<md-avatar title="on-mobile" size="48" type="on-mobile" newMomentum></md-avatar>
<md-avatar title="on-device" size="48" type="on-device" newMomentum></md-avatar>
<md-avatar title="on-hold" size="48" type="on-hold" newMomentum></md-avatar>
<md-avatar title="away-calling" size="48" type="away-calling" newMomentum></md-avatar>
<md-avatar title="active" size="48" type="active" newMomentum typing></md-avatar>
<md-avatar title="engaged" size="48" type="engaged" newMomentum></md-avatar>
<md-avatar title="rona" size="48" type="rona" newMomentum></md-avatar>
<md-avatar title="idle" size="48" type="idle" newMomentum></md-avatar>
<md-avatar title="inactive" size="48" type="inactive" newMomentum></md-avatar>
<h3>New Icon Avatar Status Size</h3>
<md-avatar title="active" size="24" type="active" newMomentum></md-avatar>
<md-avatar title="active" size="32" type="active" newMomentum></md-avatar>
<md-avatar title="active" size="40" type="active" newMomentum></md-avatar>
<md-avatar title="active" size="48" type="active" newMomentum></md-avatar>
<md-avatar title="active" size="64" type="active" newMomentum></md-avatar>
<md-avatar title="active" size="72" type="active" newMomentum></md-avatar>
<md-avatar title="active" size="88" type="active" newMomentum></md-avatar>
<md-avatar title="active" size="124" type="active" newMomentum></md-avatar>
<h3>New Icon Avatar Status legacy size</h3>
<md-avatar size="28" type="idle" title="2 8" newMomentum></md-avatar>
<md-avatar size="36" type="idle" title="3 6" newMomentum></md-avatar>
<md-avatar size="44" type="idle" title="4 4" newMomentum></md-avatar>
<md-avatar size="52" type="idle" title="5 2" newMomentum></md-avatar>
<md-avatar size="56" type="idle" title="5 6" newMomentum></md-avatar>
<br />
<br />
<md-avatar title="meeting" size="24" type="meeting" newMomentum></md-avatar>
<md-avatar title="meeting" size="32" type="meeting" newMomentum></md-avatar>
<md-avatar title="meeting" size="40" type="meeting" newMomentum></md-avatar>
<md-avatar title="meeting" size="48" type="meeting" newMomentum></md-avatar>
<md-avatar title="meeting" size="64" type="meeting" newMomentum></md-avatar>
<md-avatar title="meeting" size="72" type="meeting" newMomentum></md-avatar>
<md-avatar title="meeting" size="88" type="meeting" newMomentum></md-avatar>
<md-avatar title="meeting" size="124" type="meeting" newMomentum></md-avatar>
<h3>Icon Avatar Group</h3>
<md-avatar title="Icon" type="group"></md-avatar>
<h3>Avatar Self</h3>
<md-avatar title="Self" type="self" size="24"></md-avatar>
<md-avatar title="Self" type="self" size="28"></md-avatar>
<md-avatar title="Self" type="self" size="36"></md-avatar>
<md-avatar title="Self" type="self" size="40"></md-avatar>
<md-avatar title="Self" type="self" size="44"></md-avatar>
<md-avatar title="Self" type="self" size="56"></md-avatar>
<md-avatar title="Self" type="self" size="124"></md-avatar>
<h3>Icon Avatar Bot</h3>
<md-avatar type="bot" title="Tom Smith"></md-avatar>
<md-avatar type="bot" title="Tom Smith" newMomentum></md-avatar>
<h3>Icon Avatar Notification</h3>
<md-avatar has-notification type="active" size="72" title="Tom Smith"></md-avatar>
<h3>Icon Avatar Typing</h3>
<md-avatar type="typing" size="84" title="Tom Smith"></md-avatar>
<h3>Composite Avatar</h3>
<md-composite-avatar size="72">
<md-avatar type="typing" has-notification title="Tom Smith"></md-avatar>
<md-avatar type="dnd" title="Alyson Hoagland Pace"></md-avatar>
</md-composite-avatar>
<h3>Click Event Avatar</h3>
<md-avatar title="active" size="40" type="active" newMomentum role="button"></md-avatar>
<h3>Toggle newMomentum on avatar</h3>
<md-avatar
title="active"
size="36"
type="idle"
?newMomentum=${this.isNewMomentumEnabled}
role="button"
></md-avatar>
<br />
<md-toggle-switch htmlId="newMomentumToggleSwitch" @click=${this.toggleMomentum} alignLabel="left">
Enable new momentum
</md-toggle-switch>
`;
}
}

export const avatarTemplate = html` <avatar-template-sandbox></avatar-template-sandbox> `;
2 changes: 1 addition & 1 deletion web-components/src/components/avatar/Avatar.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ export namespace Avatar {

updated(changedProperties: PropertyValues) {
super.updated(changedProperties);
if (changedProperties.has("type")) {
if (changedProperties.has("type") || changedProperties.has("newMomentum")) {
const { presenceColor, presenceIcon } = getPresenceIconColor(this.type, this.failurePresence, this.newMomentum);
this.presenceColor = presenceColor!;
this.presenceIcon = presenceIcon!;
Expand Down
3 changes: 2 additions & 1 deletion web-components/src/components/list/List.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,7 +115,8 @@ export namespace List {
}
}
private isListItemDisabled(index: number) {
return (this.slotted[index] as ListItem.ELEMENT).disabled;
const item = this.slotted[index] as ListItem.ELEMENT;
return item?.disabled ?? true;
}

handleClick(event: MouseEvent) {
Expand Down

0 comments on commit 5959d21

Please sign in to comment.