feat: add voice type to mentions (#97)

skyra-project · Jul 25, 2021 · 9b9fcb2 · 9b9fcb2
1 parent 95196ea
commit 9b9fcb2
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 4 deletions.
diff --git a/packages/core/src/components/discord-mention/discord-mention.css b/packages/core/src/components/discord-mention/discord-mention.css
@@ -16,6 +16,11 @@
 	background-color: hsl(235, 85.6%, 64.7%);
 }
 
+.discord-message .discord-mention.discord-voice-mention {
+	padding-left: 1.25rem !important;
+	position: relative;
+}
+
 .discord-light-theme .discord-message .discord-mention {
 	color: #687dc6;
 	background-color: hsla(235, 85.6%, 64.7%, 0.15);
@@ -26,6 +31,15 @@
 	background-color: hsl(235, 85.6%, 64.7%);
 }
 
+.discord-message .discord-mention .discord-mention-icon {
+	width: 1rem;
+	height: 1rem;
+	object-fit: contain;
+	position: absolute;
+	left: 0.125rem;
+	top: 0.125rem;
+}
+
 .discord-message.discord-highlight-mention {
 	background-color: rgba(250, 166, 26, 0.1);
 	border-radius: 0 3px 3px 0;

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 VoiceChannel from '../svgs/voice-channel';
 
 @Component({
 	tag: 'discord-mention',
@@ -34,8 +35,8 @@ export class DiscordMention implements ComponentInterface {
 	public handleType(value: string) {
 		if (typeof value !== 'string') {
 			throw new TypeError('DiscordMention `type` prop must be a string.');
-		} else if (!['user', 'channel', 'role'].includes(value)) {
-			throw new RangeError("DiscordMention `type` prop must be one of: 'user', 'channel', 'role' ");
+		} else if (!['user', 'channel', 'role', 'voice'].includes(value)) {
+			throw new RangeError("DiscordMention `type` prop must be one of: 'user', 'channel', 'role', 'voice' ");
 		}
 	}
 
@@ -73,9 +74,24 @@ export class DiscordMention implements ComponentInterface {
 			'background-color'?: string;
 		} = !color || type !== 'role' ? {} : { color, 'background-color': hexToRgba(color, 0.1) };
 
+		let mentionPrepend = '';
+
+		switch (this.type) {
+			case 'channel':
+				mentionPrepend = '#';
+				break;
+			case 'user':
+			case 'role':
+				mentionPrepend = '@';
+				break;
+			case 'voice':
+				mentionPrepend = <VoiceChannel class="discord-mention-icon" />;
+				break;
+		}
+
 		return (
 			<Host style={colorStyle} class={`discord-mention discord-${type}-mention`}>
-				{type === 'channel' ? '#' : '@'}
+				{mentionPrepend}
 				<slot></slot>
 			</Host>
 		);

diff --git a/packages/core/src/components/svgs/voice-channel.tsx b/packages/core/src/components/svgs/voice-channel.tsx
@@ -0,0 +1,15 @@
+import { h } from '@stencil/core';
+
+export default function VoiceChannel<T>(props: T) {
+	return (
+		<svg {...props} aria-hidden="false" width="24" height="24" viewBox="0 0 24 24">
+			<path
+				fill="currentColor"
+				fill-rule="evenodd"
+				clip-rule="evenodd"
+				d="M11.383 3.07904C11.009 2.92504 10.579 3.01004 10.293 3.29604L6 8.00204H3C2.45 8.00204 2 8.45304 2 9.00204V15.002C2 15.552 2.45 16.002 3 16.002H6L10.293 20.71C10.579 20.996 11.009 21.082 11.383 20.927C11.757 20.772 12 20.407 12 20.002V4.00204C12 3.59904 11.757 3.23204 11.383 3.07904ZM14 5.00195V7.00195C16.757 7.00195 19 9.24595 19 12.002C19 14.759 16.757 17.002 14 17.002V19.002C17.86 19.002 21 15.863 21 12.002C21 8.14295 17.86 5.00195 14 5.00195ZM14 9.00195C15.654 9.00195 17 10.349 17 12.002C17 13.657 15.654 15.002 14 15.002V13.002C14.551 13.002 15 12.553 15 12.002C15 11.451 14.551 11.002 14 11.002V9.00195Z"
+				aria-hidden="true"
+			/>
+		</svg>
+	);
+}
diff --git a/packages/core/src/index.html b/packages/core/src/index.html
@@ -117,7 +117,8 @@ <h3 class="title">Mentions</h3>
 					<discord-message profile="maximillian">
 						Hey, <discord-mention>Alyx Vargas</discord-mention> and <discord-mention>Dawn</discord-mention>. Welcome to our server! Be
 						sure to read through the <discord-mention type="channel">rules</discord-mention>. You can ping
-						<discord-mention type="role" color="#70f0b4">Support</discord-mention> if you need help.
+						<discord-mention type="role" color="#70f0b4">Support</discord-mention> if you need help. Feel free to join
+						<discord-mention type="voice" color="#70f0b4">General</discord-mention> and talk with us.
 					</discord-message>
 					<discord-message author="Alyx Vargas">
 						Hey there <discord-mention highlight>Maximillian Osborn</discord-mention>, thanks! I will!