fix: fixed clan tags not showing up properly

skyra-project · Aug 24, 2024 · de183c0 · de183c0
1 parent adcaaf4
commit de183c0
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 17 deletions.
diff --git a/packages/core/UPGRADING-TO-V4.md b/packages/core/UPGRADING-TO-V4.md
@@ -211,4 +211,17 @@ that represents a list item within a `discord-unordered-list` or
 A new component called `discord-subscript` has been added. This is the component
 that represents a text with susbcript styling (smaller font size and lowered).
 
+#### `discord-author-info`
+
+The following properties were changed from `camelCase` to `kebab-case`:
+
+- `roleColor` -> `role-color`
+- `roleIcon` -> `role-icon`
+- `roleName` -> `role-name`
+
+The following properties were newly added:
+
+- `clan-icon`
+- `clan-tag`
+
 [Lit]: https://lit.dev
diff --git a/packages/core/src/components/discord-author-info/DiscordAuthorInfo.ts b/packages/core/src/components/discord-author-info/DiscordAuthorInfo.ts
@@ -167,19 +167,19 @@ export class DiscordAuthorInfo extends LitElement {
 	/**
 	 * The colour of the author, which comes from their highest role
 	 */
-	@property()
+	@property({ attribute: 'role-color' })
 	public accessor roleColor: string | undefined = undefined;
 
 	/**
 	 * The role icon of the author, which comes from their highest role
 	 */
-	@property()
+	@property({ attribute: 'role-icon' })
 	public accessor roleIcon: string | undefined = undefined;
 
 	/**
 	 * The role name of the author, which comes from their highest role
 	 */
-	@property()
+	@property({ attribute: 'role-name' })
 	public accessor roleName: string | undefined = undefined;
 
 	/**

diff --git a/packages/core/src/components/discord-message/DiscordMessage.ts b/packages/core/src/components/discord-message/DiscordMessage.ts
@@ -477,12 +477,11 @@ export class DiscordMessage extends LitElement implements LightTheme {
 								?server=${profile.server ?? false}
 								?verified=${profile.verified ?? false}
 								?op=${profile.op ?? false}
-								roleColor=${profile.roleColor ?? ''}
-								roleIcon=${profile.roleIcon ?? ''}
-								roleName=${profile.roleName ?? ''}
-								clanIcon=${profile.clanIcon ?? ''}
-								clanTag=${profile.clanTag ?? ''}
-								?compact=${false}
+								role-color=${profile.roleColor ?? ''}
+								role-icon=${profile.roleIcon ?? ''}
+								role-name=${profile.roleName ?? ''}
+								clan-icon=${profile.clanIcon ?? ''}
+								clan-tag=${profile.clanTag ?? ''}
 							></discord-author-info
 							><time datetime="${ifDefined(computedTimestamp)}" class="discord-message-timestamp">${computedTimestamp}</time>
 						`
@@ -497,12 +496,11 @@ export class DiscordMessage extends LitElement implements LightTheme {
 									?server=${profile.server ?? false}
 									?verified=${profile.verified ?? false}
 									?op=${profile.op ?? false}
-									roleColor=${profile.roleColor ?? ''}
-									roleIcon=${profile.roleIcon ?? ''}
-									roleName=${profile.roleName ?? ''}
-									clanIcon=${profile.clanIcon ?? ''}
-									clanTag=${profile.clanTag ?? ''}
-									?compact=${true}
+									role-color=${profile.roleColor ?? ''}
+									role-icon=${profile.roleIcon ?? ''}
+									role-name=${profile.roleName ?? ''}
+									clan-icon=${profile.clanIcon ?? ''}
+									clan-tag=${profile.clanTag ?? ''}
 								></discord-author-info>`,
 							() => null
 						)}<span class="discord-message-markup"><slot></slot></span>

diff --git a/packages/core/src/components/discord-reply/DiscordReply.ts b/packages/core/src/components/discord-reply/DiscordReply.ts
@@ -384,8 +384,8 @@ export class DiscordReply extends LitElement implements LightTheme {
 		const profileData: Profile = Reflect.get(profiles, this.profile) ?? {};
 		const profile: Profile = { ...defaultData, ...profileData, avatar: this.resolveAvatar(profileData.avatar ?? this.avatar) };
 
-		const clanIcon = getClanIcon(this.clanIcon);
-		const slicedClanTag = this.clanTag?.slice(0, 4);
+		const clanIcon = getClanIcon(profile.clanIcon);
+		const slicedClanTag = profile.clanTag?.slice(0, 4);
 
 		const profileTag = html`
 			${when(