feat: add forum mention icon (#244)

Snazzah · web-flow · commit eea0ee706986 · 2022-05-10T22:22:32.000+02:00
diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -227,9 +227,9 @@ export namespace Components {
          */
         "highlight": boolean;
         /**
-          * The type of mention this should be. This will prepend the proper prefix character. Valid values: `user`, `channel`, `role`, `voice`, and `locked`.
+          * The type of mention this should be. This will prepend the proper prefix character. Valid values: `user`, `channel`, `role`, `voice`, `locked`, `thread`, and `forum`.
          */
-        "type": 'user' | 'channel' | 'role' | 'voice' | 'locked' | 'thread';
+        "type": 'user' | 'channel' | 'role' | 'voice' | 'locked' | 'thread' | 'forum';
     }
     interface DiscordMessage {
         /**
@@ -894,9 +894,9 @@ declare namespace LocalJSX {
          */
         "highlight"?: boolean;
         /**
-          * The type of mention this should be. This will prepend the proper prefix character. Valid values: `user`, `channel`, `role`, `voice`, and `locked`.
+          * The type of mention this should be. This will prepend the proper prefix character. Valid values: `user`, `channel`, `role`, `voice`, `locked`, `thread`, and `forum`.
          */
-        "type"?: 'user' | 'channel' | 'role' | 'voice' | 'locked' | 'thread';
+        "type"?: 'user' | 'channel' | 'role' | 'voice' | 'locked' | 'thread' | 'forum';
     }
     interface DiscordMessage {
         /**
diff --git a/packages/core/src/components/discord-mention/discord-mention.css b/packages/core/src/components/discord-mention/discord-mention.css
@@ -23,7 +23,8 @@
 
 .discord-message .discord-mention.discord-voice-mention,
 .discord-message .discord-mention.discord-locked-mention,
-.discord-message .discord-mention.discord-thread-mention {
+.discord-message .discord-mention.discord-thread-mention,
+.discord-message .discord-mention.discord-forum-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
@@ -4,6 +4,7 @@ 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 ChannnelForum from '../svgs/channel-forum';
 
 @Component({
 	tag: 'discord-mention',
@@ -30,17 +31,17 @@ export class DiscordMention implements ComponentInterface {
 
 	/**
 	 * The type of mention this should be. This will prepend the proper prefix character.
-	 * Valid values: `user`, `channel`, `role`, `voice`, and `locked`.
+	 * Valid values: `user`, `channel`, `role`, `voice`, `locked`, `thread`, and `forum`.
 	 */
 	@Prop()
-	public type: 'user' | 'channel' | 'role' | 'voice' | 'locked' | 'thread' = 'user';
+	public type: 'user' | 'channel' | 'role' | 'voice' | 'locked' | 'thread' | 'forum' = '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', 'thread'].includes(value)) {
-			throw new RangeError("DiscordMention `type` prop must be one of: 'user', 'channel', 'role', 'voice', 'locked', 'thread' ");
+		} else if (!['user', 'channel', 'role', 'voice', 'locked', 'thread', 'forum'].includes(value)) {
+			throw new RangeError("DiscordMention `type` prop must be one of: 'user', 'channel', 'role', 'voice', 'locked', 'thread', 'forum'");
 		}
 	}
 
@@ -97,6 +98,9 @@ export class DiscordMention implements ComponentInterface {
 			case 'thread':
 				mentionPrepend = <ChannelThread class="discord-mention-icon" />;
 				break;
+			case 'forum':
+				mentionPrepend = <ChannnelForum 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" \| "thread" \| "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`, `locked`, `thread`, and `forum`. | `"channel" \| "forum" \| "locked" \| "role" \| "thread" \| "user" \| "voice"` | `'user'`    |
 
 ---
 
diff --git a/packages/core/src/components/svgs/channel-forum.tsx b/packages/core/src/components/svgs/channel-forum.tsx
@@ -0,0 +1,14 @@
+import { h } from '@stencil/core';
+
+export default function ChannnelForum<T>(props: T) {
+	return (
+		<svg {...props} aria-hidden="false" width="24" height="24" viewBox="0 0 20 20" fill="none">
+			<path
+				fill="currentColor"
+				fill-rule="evenodd"
+				clip-rule="evenodd"
+				d="M6.56929 14.6869H2.34375C1.97079 14.6869 1.61311 14.5387 1.34938 14.275C1.08566 14.0113 0.9375 13.6536 0.9375 13.2806V8.12437C0.9375 6.38389 1.6289 4.7147 2.85961 3.484C4.09032 2.25329 5.75951 1.56189 7.49999 1.56189C9.24047 1.56189 10.9097 2.25329 12.1404 3.484C12.6953 4.03895 13.1406 4.68307 13.4623 5.38267C14.9101 5.5973 16.2513 6.29124 17.2655 7.36251C18.4194 8.58133 19.0625 10.1959 19.0625 11.8744V17.0306C19.0625 17.4036 18.9144 17.7613 18.6506 18.025C18.3869 18.2887 18.0292 18.4369 17.6563 18.4369H12.5C11.1428 18.4369 9.81899 18.0162 8.71072 17.2328C7.7871 16.58 7.05103 15.7019 6.56929 14.6869ZM4.18544 4.80982C5.06451 3.93075 6.25679 3.43689 7.49999 3.43689C8.74319 3.43689 9.93549 3.93075 10.8146 4.80983C11.6936 5.6889 12.1875 6.88119 12.1875 8.12439C12.1875 9.36759 11.6936 10.5599 10.8146 11.439C9.93549 12.318 8.74321 12.8119 7.50001 12.8119H7.20268C7.19767 12.8118 7.19266 12.8118 7.18764 12.8119H2.8125V8.12438C2.8125 6.88118 3.30636 5.6889 4.18544 4.80982ZM8.672 14.5814C8.97763 15.0132 9.35591 15.3928 9.79299 15.7017C10.5847 16.2614 11.5305 16.5619 12.5 16.5619H17.1875V11.8744C17.1875 10.6755 16.7281 9.52219 15.9039 8.65159C15.3804 8.09865 14.735 7.68644 14.027 7.44246C14.0506 7.66798 14.0625 7.89557 14.0625 8.12439C14.0625 9.86487 13.3711 11.5341 12.1404 12.7648C11.1896 13.7156 9.97697 14.3445 8.672 14.5814Z"
+			/>
+		</svg>
+	);
+}
diff --git a/packages/core/src/index.html b/packages/core/src/index.html
@@ -168,7 +168,7 @@ <h3 class="title">Mentions</h3>
 						<discord-mention type="role" color="#70f0b4">Support</discord-mention>
 						if you need help. Feel free to join
 						<discord-mention type="voice">General</discord-mention>
-						and talk with us.
+						and talk with us and post thoughts in <discord-mention type="forum">feedback</discord-mention>.
 					</discord-message>
 					<discord-message author="Alyx Vargas">
 						Hey there

Original file line number	Diff line number	Diff line change
`@@ -23,7 +23,8 @@`
`23`	`23`
`24`	`24`	`.discord-message .discord-mention.discord-voice-mention,`
`25`	`25`	`.discord-message .discord-mention.discord-locked-mention,`
`26`		`-.discord-message .discord-mention.discord-thread-mention {`
	`26`	`+.discord-message .discord-mention.discord-thread-mention,`
	`27`	`+.discord-message .discord-mention.discord-forum-mention {`
`27`	`28`	`padding-left: 1.25rem !important;`
`28`	`29`	`position: relative;`
`29`	`30`	`}`