feat: add pin icon to system messages (#317)

Co-authored-by: Jeroen Claassens <support@favware.tech>
skyra-project · Jan 23, 2023 · b34d635 · b34d635
1 parent dda34d5
commit b34d635
Show file tree

Hide file tree

Showing 5 changed files with 31 additions and 15 deletions.
diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -402,9 +402,9 @@ export namespace Components {
          */
         "timestamp": DiscordTimestamp;
         /**
-          * The type of system message this is, this will change the icon shown. Valid values: `join`, `leave`, `call`, `missed-call`, `boost`, `edit`, `thread`, `alert`, and `error`.
+          * 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`.
          */
-        "type": 'join' | 'leave' | 'call' | 'missed-call' | 'boost' | 'edit' | 'thread' | 'alert' | 'error';
+        "type": 'join' | 'leave' | 'call' | 'missed-call' | 'boost' | 'edit' | 'thread' | 'pin' | 'alert' | 'error';
     }
     interface DiscordTenorVideo {
         /**
@@ -1077,9 +1077,9 @@ declare namespace LocalJSX {
          */
         "timestamp"?: DiscordTimestamp;
         /**
-          * The type of system message this is, this will change the icon shown. Valid values: `join`, `leave`, `call`, `missed-call`, `boost`, `edit`, `thread`, `alert`, and `error`.
+          * 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`.
          */
-        "type"?: 'join' | 'leave' | 'call' | 'missed-call' | 'boost' | 'edit' | 'thread' | 'alert' | 'error';
+        "type"?: 'join' | 'leave' | 'call' | 'missed-call' | 'boost' | 'edit' | 'thread' | 'pin' | 'alert' | 'error';
     }
     interface DiscordTenorVideo {
         /**

diff --git a/packages/core/src/components/discord-mention/discord-mention.tsx b/packages/core/src/components/discord-mention/discord-mention.tsx
@@ -1,10 +1,10 @@
 import { Component, ComponentInterface, Element, h, Host, Prop, Watch } from '@stencil/core';
 import hexToRgba from 'hex-to-rgba';
+import ChannelForum from '../svgs/channel-forum';
+import ChannelIcon from '../svgs/channel-icon';
 import ChannelThread from '../svgs/channel-thread';
 import LockedVoiceChannel from '../svgs/locked-voice-channel';
 import VoiceChannel from '../svgs/voice-channel';
-import ChannelIcon from '../svgs/channel-icon';
-import ChannelForum from '../svgs/channel-forum';
 
 @Component({
 	tag: 'discord-mention',

diff --git a/packages/core/src/components/discord-system-message/discord-system-message.tsx b/packages/core/src/components/discord-system-message/discord-system-message.tsx
@@ -5,6 +5,7 @@ import Boost from '../svgs/boost';
 import DMCall from '../svgs/dm-call';
 import DMEdit from '../svgs/dm-edit';
 import DMMissedCall from '../svgs/dm-missed-call';
+import Pin from '../svgs/pin';
 import SystemAlert from '../svgs/system-alert';
 import SystemError from '../svgs/system-error';
 import Thread from '../svgs/thread';
@@ -30,10 +31,10 @@ export class DiscordSystemMessage implements ComponentInterface {
 
 	/**
 	 * The type of system message this is, this will change the icon shown.
-	 * Valid values: `join`, `leave`, `call`, `missed-call`, `boost`, `edit`, `thread`, `alert`, and `error`.
+	 * Valid values: `join`, `leave`, `call`, `missed-call`, `boost`, `edit`, `thread`, `pin`, `alert`, and `error`.
 	 */
 	@Prop()
-	public type: 'join' | 'leave' | 'call' | 'missed-call' | 'boost' | 'edit' | 'thread' | 'alert' | 'error' = 'join';
+	public type: 'join' | 'leave' | 'call' | 'missed-call' | 'boost' | 'edit' | 'thread' | 'pin' | 'alert' | 'error' = 'join';
 
 	/**
 	 * Whether this message is to show channel name changes, used to match Discord's style.
@@ -45,9 +46,9 @@ export class DiscordSystemMessage implements ComponentInterface {
 	public handleType(value: string) {
 		if (typeof value !== 'string') {
 			throw new TypeError('DiscordSystemMessage `type` prop must be a string.');
-		} else if (!['join', 'leave', 'call', 'missed-call', 'boost', 'edit', 'thread', 'alert', 'error'].includes(value)) {
+		} else if (!['join', 'leave', 'call', 'missed-call', 'boost', 'edit', 'thread', 'pin', 'alert', 'error'].includes(value)) {
 			throw new RangeError(
-				"DiscordSystemMessage `type` prop must be one of: 'join', 'leave', 'call', 'missed-call', 'boost', 'edit', 'thread' 'alert', 'error'"
+				"DiscordSystemMessage `type` prop must be one of: 'join', 'leave', 'call', 'missed-call', 'boost', 'edit', 'pin', 'thread' 'alert', 'error'"
 			);
 		}
 	}
@@ -98,6 +99,9 @@ export class DiscordSystemMessage implements ComponentInterface {
 			case 'error':
 				icon = <SystemError />;
 				break;
+			case 'pin':
+				icon = <Pin />;
+				break;
 		}
 
 		const hasThread: boolean =

diff --git a/packages/core/src/components/discord-system-message/readme.md b/packages/core/src/components/discord-system-message/readme.md
@@ -4,11 +4,11 @@
 
 ## Properties
 
-| Property      | Attribute      | Description                                                                                                                                                                 | Type                                                                                                  | Default      |
-| ------------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------- | ------------ |
-| `channelName` | `channel-name` | Whether this message is to show channel name changes, used to match Discord's style.                                                                                        | `boolean`                                                                                             | `false`      |
-| `timestamp`   | `timestamp`    | The timestamp to use for the message date.                                                                                                                                  | `Date \| null \| string`                                                                              | `new Date()` |
-| `type`        | `type`         | The type of system message this is, this will change the icon shown. Valid values: `join`, `leave`, `call`, `missed-call`, `boost`, `edit`, `thread`, `alert`, and `error`. | `"alert" \| "boost" \| "call" \| "edit" \| "error" \| "join" \| "leave" \| "missed-call" \| "thread"` | `'join'`     |
+| Property      | Attribute      | Description                                                                                                                                                                        | Type                                                                                                           | Default      |
+| ------------- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- | ------------ |
+| `channelName` | `channel-name` | Whether this message is to show channel name changes, used to match Discord's style.                                                                                               | `boolean`                                                                                                      | `false`      |
+| `timestamp`   | `timestamp`    | The timestamp to use for the message date.                                                                                                                                         | `Date \| null \| string`                                                                                       | `new Date()` |
+| `type`        | `type`         | 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`. | `"alert" \| "boost" \| "call" \| "edit" \| "error" \| "join" \| "leave" \| "missed-call" \| "pin" \| "thread"` | `'join'`     |
 
 ---
 

diff --git a/packages/core/src/components/svgs/pin.tsx b/packages/core/src/components/svgs/pin.tsx
@@ -0,0 +1,12 @@
+import { h } from '@stencil/core';
+
+export default function Pin<T>(props: T) {
+	return (
+		<svg {...props} aria-hidden="false" height="18" viewBox="0 0 18 18" width="18">
+			<path
+				d="m16.908 8.39684-8.29587-8.295827-1.18584 1.184157 1.18584 1.18584-4.14834 4.1475v.00167l-1.18583-1.18583-1.185 1.18583 3.55583 3.55502-4.740831 4.74 1.185001 1.185 4.74083-4.74 3.55581 3.555 1.185-1.185-1.185-1.185 4.1475-4.14836h.0009l1.185 1.185z"
+				fill="#b9bbbe"
+			/>
+		</svg>
+	);
+}