feat(system-message): add upgrade type (#450)

* feat(system-message): add upgrade type * fix: remove extra pin
skyra-project · Aug 19, 2024 · 39b5ad0 · 39b5ad0
1 parent 93d5347
commit 39b5ad0
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 5 deletions.
diff --git a/packages/core/demo/index.html b/packages/core/demo/index.html
@@ -373,6 +373,7 @@ <h3 class="title">System Messages</h3>
 					<discord-system-message type="pin"
 						><i>Favna</i> pinned <i>a message</i> to this channel. See all <i>pinned messages</i>.</discord-system-message
 					>
+					<discord-system-message type="upgrade"><i>Dominik</i> upgraded Skyra to premium for this server! 🎉</discord-system-message>
 					<discord-system-message type="alert">Warning! Warning! This library is the coolest of them all!</discord-system-message>
 					<discord-system-message type="error">Error! Cool overload!.</discord-system-message>
 				</discord-messages>

diff --git a/packages/core/src/components/discord-system-message/DiscordSystemMessage.ts b/packages/core/src/components/discord-system-message/DiscordSystemMessage.ts
@@ -10,6 +10,7 @@ import DMCall from '../svgs/DMCall.js';
 import DMEdit from '../svgs/DMEdit.js';
 import DMMissedCall from '../svgs/DMMissedCall.js';
 import Pin from '../svgs/Pin.js';
+import ServerUpgrade from '../svgs/ServerUpgrade.js';
 import SystemAlert from '../svgs/SystemAlert.js';
 import SystemError from '../svgs/SystemError.js';
 import Thread from '../svgs/Thread.js';
@@ -151,10 +152,10 @@ export class DiscordSystemMessage extends LitElement implements LightTheme {
 
 	/**
 	 * The type of system message this is, this will change the icon shown.
-	 * Valid values: `join`, `leave`, `call`, `missed-call`, `boost`, `edit`, `thread`, `pin`, `alert`, and `error`.
+	 * Valid values: `join`, `leave`, `call`, `missed-call`, `boost`, `edit`, `thread`, `pin`, `alert`, `upgrade` and `error`.
 	 */
 	@property({ reflect: true, attribute: 'type' })
-	public accessor type: 'alert' | 'boost' | 'call' | 'edit' | 'error' | 'join' | 'leave' | 'missed-call' | 'pin' | 'thread' = 'join';
+	public accessor type: 'alert' | 'boost' | 'call' | 'edit' | 'error' | 'join' | 'leave' | 'missed-call' | 'pin' | 'thread' | 'upgrade' = 'join';
 
 	/**
 	 * Whether this message is to show channel name changes, used to match Discord's style.
@@ -172,9 +173,9 @@ export class DiscordSystemMessage extends LitElement implements LightTheme {
 	public checkType() {
 		if (typeof this.type !== 'string') {
 			throw new TypeError('DiscordSystemMessage `type` prop must be a string.');
-		} else if (!['join', 'leave', 'call', 'missed-call', 'boost', 'edit', 'thread', 'pin', 'alert', 'error'].includes(this.type)) {
+		} else if (!['join', 'leave', 'call', 'missed-call', 'boost', 'edit', 'thread', 'pin', 'alert', 'error', 'upgrade'].includes(this.type)) {
 			throw new RangeError(
-				"DiscordSystemMessage `type` prop must be one of: 'join', 'leave', 'call', 'missed-call', 'boost', 'edit', 'thread', 'pin', 'alert', 'error'"
+				"DiscordSystemMessage `type` prop must be one of: 'join', 'leave', 'call', 'missed-call', 'boost', 'edit', 'thread', 'pin', 'alert', 'upgrade', 'error'"
 			);
 		}
 	}
@@ -200,7 +201,8 @@ export class DiscordSystemMessage extends LitElement implements LightTheme {
 					['thread', () => Thread()],
 					['pin', () => Pin()],
 					['alert', () => SystemAlert()],
-					['error', () => SystemError()]
+					['error', () => SystemError()],
+					['upgrade', () => ServerUpgrade()]
 				])}
 			</div>
 			<div class="discord-message-content">

diff --git a/packages/core/src/components/svgs/ServerUpgrade.ts b/packages/core/src/components/svgs/ServerUpgrade.ts
@@ -0,0 +1,15 @@
+import { html, svg } from 'lit';
+import { spread } from '../../spread.js';
+
+const svgContent = svg`
+	<path
+		fill="#b9bbbe"
+		fill-rule="evenodd"
+		d="M1.575 9a2.25 2.25 0 0 0 0 3.18l.345.345c.128.128.323.15.488.075a2.25 2.25 0 0 1 3 3 .43.43 0 0 0 .06.48l.352.345a2.25 2.25 0 0 0 3.18 0l5.077-5.077a.75.75 0 0 1 1.02-1.02L16.425 9a2.25 2.25 0 0 0 0-3.18l-.345-.352a.42.42 0 0 0-.488-.06 2.25 2.25 0 0 1-3-3 .42.42 0 0 0-.068-.488l-.345-.345a2.25 2.25 0 0 0-3.18 0L7.671 2.903a.75.75 0 0 1-1.02 1.02zm7.508-4.725a.75.75 0 1 0-1.057 1.05l.517.525A.75.75 0 1 0 9.6 4.785l-.517-.525Zm2.063 2.063a.75.75 0 1 0-1.057 1.057l.517.525a.75.75 0 0 0 1.057-1.065l-.517-.525Zm2.063 2.063a.75.75 0 0 0-1.057 1.057l.517.525a.75.75 0 0 0 1.057-1.065l-.517-.525Z"
+		clip-rule="evenodd"
+	/>
+`;
+
+export default function ServerUpgrade(props: Record<string, unknown> = {}) {
+	return html`<svg ${spread(props)} aria-hidden="false" width="18" height="18" viewBox="0 0 18 18">${svgContent}</svg>`;
+}
diff --git a/packages/documentation/src/lit/components/DiscordComponentsWrapper.ts b/packages/documentation/src/lit/components/DiscordComponentsWrapper.ts
@@ -358,6 +358,7 @@ export class DiscordComponentsWrapper extends LitElement {
 					<discord-system-message type="pin"
 						><i>Favna</i> pinned <i>a message</i> to this channel. See all <i>pinned messages</i>.</discord-system-message
 					>
+					<discord-system-message type="upgrade"><i>Dominik</i> upgraded Skyra to premium for this server! 🎉</discord-system-message>
 					<discord-system-message type="alert">Warning! Warning! This library is the coolest of them all!</discord-system-message>
 					<discord-system-message type="error">Error! Cool overload!.</discord-system-message>
 				</discord-messages>