feat(discord-mention): add new thread type (#117)

skyra-project · Aug 30, 2021 · 3719679 · 3719679
1 parent 3c80638
commit 3719679
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 11 deletions.
diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -195,7 +195,7 @@ export namespace Components {
         /**
           * The type of mention this should be. This will prepend the proper prefix character. Valid values: `user`, `channel`, `role`, `voice`, and `locked`.
          */
-        "type": 'user' | 'channel' | 'role' | 'voice' | 'locked';
+        "type": 'user' | 'channel' | 'role' | 'voice' | 'locked' | 'thread';
     }
     interface DiscordMessage {
         /**
@@ -654,7 +654,7 @@ declare namespace LocalJSX {
         /**
           * The type of mention this should be. This will prepend the proper prefix character. Valid values: `user`, `channel`, `role`, `voice`, and `locked`.
          */
-        "type"?: 'user' | 'channel' | 'role' | 'voice' | 'locked';
+        "type"?: 'user' | 'channel' | 'role' | 'voice' | 'locked' | 'thread';
     }
     interface DiscordMessage {
         /**

diff --git a/packages/core/src/components/discord-mention/discord-mention.css b/packages/core/src/components/discord-mention/discord-mention.css
@@ -17,7 +17,8 @@
 }
 
 .discord-message .discord-mention.discord-voice-mention,
-.discord-message .discord-mention.discord-locked-mention {
+.discord-message .discord-mention.discord-locked-mention,
+.discord-message .discord-mention.discord-thread-mention {
 	padding-left: 1.25rem !important;
 	position: relative;
 }

diff --git a/packages/core/src/components/discord-mention/discord-mention.tsx b/packages/core/src/components/discord-mention/discord-mention.tsx
@@ -1,5 +1,6 @@
 import { Component, ComponentInterface, Element, h, Host, Prop, Watch } from '@stencil/core';
 import hexToRgba from 'hex-to-rgba';
+import ChannelThread from '../svgs/channel-thread';
 import LockedVoiceChannel from '../svgs/locked-voice-channel';
 import VoiceChannel from '../svgs/voice-channel';
 
@@ -31,14 +32,14 @@ export class DiscordMention implements ComponentInterface {
 	 * Valid values: `user`, `channel`, `role`, `voice`, and `locked`.
 	 */
 	@Prop()
-	public type: 'user' | 'channel' | 'role' | 'voice' | 'locked' = 'user';
+	public type: 'user' | 'channel' | 'role' | 'voice' | 'locked' | 'thread' = 'user';
 
 	@Watch('type')
 	public handleType(value: string) {
 		if (typeof value !== 'string') {
 			throw new TypeError('DiscordMention `type` prop must be a string.');
-		} else if (!['user', 'channel', 'role', 'voice', 'locked'].includes(value)) {
-			throw new RangeError("DiscordMention `type` prop must be one of: 'user', 'channel', 'role', 'voice', 'locked' ");
+		} else if (!['user', 'channel', 'role', 'voice', 'locked', 'thread'].includes(value)) {
+			throw new RangeError("DiscordMention `type` prop must be one of: 'user', 'channel', 'role', 'voice', 'locked', 'thread' ");
 		}
 	}
 
@@ -92,6 +93,9 @@ export class DiscordMention implements ComponentInterface {
 			case 'locked':
 				mentionPrepend = <LockedVoiceChannel class="discord-mention-icon" />;
 				break;
+			case 'thread':
+				mentionPrepend = <ChannelThread class="discord-mention-icon" />;
+				break;
 		}
 
 		return (

diff --git a/packages/core/src/components/discord-mention/readme.md b/packages/core/src/components/discord-mention/readme.md
@@ -4,11 +4,11 @@
 
 ## Properties
 
-| Property    | Attribute   | Description                                                                                                                                        | Type                                                   | Default     |
-| ----------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ | ----------- |
-| `color`     | `color`     | The color to use for this mention. Only works for role mentions and must be in hex format.                                                         | `string`                                               | `undefined` |
-| `highlight` | `highlight` | Whether this entire message block should be highlighted (to emulate the "logged in user" being pinged).                                            | `boolean`                                              | `false`     |
-| `type`      | `type`      | The type of mention this should be. This will prepend the proper prefix character. Valid values: `user`, `channel`, `role`, `voice`, and `locked`. | `"channel" \| "locked" \| "role" \| "user" \| "voice"` | `'user'`    |
+| Property    | Attribute   | Description                                                                                                                                        | Type                                                               | Default     |
+| ----------- | ----------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | ----------- |
+| `color`     | `color`     | The color to use for this mention. Only works for role mentions and must be in hex format.                                                         | `string`                                                           | `undefined` |
+| `highlight` | `highlight` | Whether this entire message block should be highlighted (to emulate the "logged in user" being pinged).                                            | `boolean`                                                          | `false`     |
+| `type`      | `type`      | The type of mention this should be. This will prepend the proper prefix character. Valid values: `user`, `channel`, `role`, `voice`, and `locked`. | `"channel" \| "locked" \| "role" \| "thread" \| "user" \| "voice"` | `'user'`    |
 
 ---
 

diff --git a/packages/core/src/components/svgs/channel-thread.tsx b/packages/core/src/components/svgs/channel-thread.tsx
@@ -0,0 +1,16 @@
+import { h } from '@stencil/core';
+
+export default function ChannelThread<T>(props: T) {
+	return (
+		<svg {...props} aria-hidden="false" width="24" height="24" viewBox="0 0 24 24">
+			<path
+				fill="currentColor"
+				d="M5.43309 21C5.35842 21 5.30189 20.9325 5.31494 20.859L5.99991 17H2.14274C2.06819 17 2.01168 16.9327 2.02453 16.8593L2.33253 15.0993C2.34258 15.0419 2.39244 15 2.45074 15H6.34991L7.40991 9H3.55274C3.47819 9 3.42168 8.93274 3.43453 8.85931L3.74253 7.09931C3.75258 7.04189 3.80244 7 3.86074 7H7.75991L8.45234 3.09903C8.46251 3.04174 8.51231 3 8.57049 3H10.3267C10.4014 3 10.4579 3.06746 10.4449 3.14097L9.75991 7H15.7599L16.4523 3.09903C16.4625 3.04174 16.5123 3 16.5705 3H18.3267C18.4014 3 18.4579 3.06746 18.4449 3.14097L17.7599 7H21.6171C21.6916 7 21.7481 7.06725 21.7353 7.14069L21.4273 8.90069C21.4172 8.95811 21.3674 9 21.3091 9H17.4099L17.0495 11.04H15.05L15.4104 9H9.41035L8.35035 15H10.5599V17H7.99991L7.30749 20.901C7.29732 20.9583 7.24752 21 7.18934 21H5.43309Z"
+			/>
+			<path
+				fill="currentColor"
+				d="M13.4399 12.96C12.9097 12.96 12.4799 13.3898 12.4799 13.92V20.2213C12.4799 20.7515 12.9097 21.1813 13.4399 21.1813H14.3999C14.5325 21.1813 14.6399 21.2887 14.6399 21.4213V23.4597C14.6399 23.6677 14.8865 23.7773 15.0408 23.6378L17.4858 21.4289C17.6622 21.2695 17.8916 21.1813 18.1294 21.1813H22.5599C23.0901 21.1813 23.5199 20.7515 23.5199 20.2213V13.92C23.5199 13.3898 23.0901 12.96 22.5599 12.96H13.4399Z"
+			/>
+		</svg>
+	);
+}