feat: add discord-header component

Author: favna

packages/core/UPGRADING-TO-V4.md

@@ -1,5 +1,16 @@
 # Upgrading to v4
 
+- [Upgrading to v4](#upgrading-to-v4)
+  - [Breaking changes](#breaking-changes)
+    - [Support for NextJS](#support-for-nextjs)
+    - [Default font](#default-font)
+    - [Whitney font](#whitney-font)
+    - [Frameworkless usage](#frameworkless-usage)
+    - [Component changes](#component-changes)
+      - [`discord-inline-code`](#discord-inline-code)
+      - [`discord-code`](#discord-code)
+      - [`discord-header`](#discord-header)
+
 In version 4.x of @skyra/discord-components-core, the library has been rewritten
 from from [StencilJS](https://stenciljs.com) to [Lit]. This means that this
 library now offers proper
@@ -121,4 +132,11 @@ default to inline.
 As mentioned above, `discord-code` will default to inline. To get multiline code
 blocks set `multiline="true"` as property.
 
+#### `discord-header`
+
+A new component called `discord-header` has been added. This is the component
+that represents Discord markdown headers (lines starting with one of `#`, `##`,
+or `###`). The maximum level is 3, just like it is for Discord. An error is
+thrown if a level lower than 1 or higher than 3 is used.
+
 [Lit]: https://lit.dev

packages/core/package.json

@@ -25,6 +25,7 @@
 		"./discord-embed-field.js": "./dist/components/discord-embed-field/DiscordEmbedField.js",
 		"./discord-embed-fields.js": "./dist/components/discord-embed-fields/DiscordEmbedFields.js",
 		"./discord-embed-footer.js": "./dist/components/discord-embed-footer/DiscordEmbedFooter.js",
+		"./discord-header.js": "./dist/components/discord-header/DiscordHeader.js",
 		"./discord-invite.js": "./dist/components/discord-invite/DiscordInvite.js",
 		"./discord-italic.js": "./dist/components/discord-italic/DiscordItalic.js",
 		"./discord-link.js": "./dist/components/discord-link/DiscordLink.js",
@@ -60,6 +61,7 @@
 		"./dist/components/discord-embed-field/DiscordEmbedField.js",
 		"./dist/components/discord-embed-fields/DiscordEmbedFields.js",
 		"./dist/components/discord-embed-footer/DiscordEmbedFooter.js",
+		"./dist/components/discord-header/DiscordHeader.js",
 		"./dist/components/discord-invite/DiscordInvite.js",
 		"./dist/components/discord-italic/DiscordItalic.js",
 		"./dist/components/discord-link/DiscordLink.js",

packages/core/src/components/discord-header/DiscordHeader.ts

@@ -0,0 +1,69 @@
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+@customElement('discord-header')
+export class DiscordHeader extends LitElement {
+	public static override styles = css`
+		:host {
+			margin: 16px 0 8px;
+			font-weight: 700;
+			line-height: 1.375em;
+		}
+
+		:host([level='1']) {
+			font-size: 1.5rem;
+		}
+
+		:host([level='2']) {
+			font-size: 1.25rem;
+		}
+
+		:host([level='3']) {
+			font-size: 1rem;
+		}
+
+		:host([level='1']):first-child(),
+		:host([level='2']):first-child() {
+			margin-top: 8px;
+		}
+
+		:host([level='3']):first-child() {
+			margin-top: 4px;
+		}
+	`;
+
+	/**
+	 * The header level, this should be a number between 1 and 3 (inclusive).
+	 * If a number outside of this range is provided, an error is thrown.
+	 */
+	@property({ type: Number, reflect: true })
+	public accessor level: 1 | 2 | 3 = 1;
+
+	public checkLevel() {
+		if (this.level < 1 || this.level > 3) {
+			throw new RangeError('The level property must be a number between 1 and 3 (inclusive)');
+		}
+	}
+
+	protected override render() {
+		this.checkLevel();
+
+		switch (this.level) {
+			case 1: {
+				return html`<h1><slot></slot></h1>`;
+			}
+			case 2: {
+				return html`<h2><slot></slot></h2>`;
+			}
+			case 3: {
+				return html`<h3><slot></slot></h3>`;
+			}
+		}
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		'discord-header': DiscordHeader;
+	}
+}

packages/core/src/index.ts

@@ -16,6 +16,7 @@ export { DiscordEmbedDescription } from './components/discord-embed-description/
 export { DiscordEmbedField } from './components/discord-embed-field/DiscordEmbedField.js';
 export { DiscordEmbedFields } from './components/discord-embed-fields/DiscordEmbedFields.js';
 export { DiscordEmbedFooter } from './components/discord-embed-footer/DiscordEmbedFooter.js';
+export { DiscordHeader } from './components/discord-header/DiscordHeader.js';
 export { DiscordInvite } from './components/discord-invite/DiscordInvite.js';
 export { DiscordItalic } from './components/discord-italic/DiscordItalic.js';
 export { DiscordLink } from './components/discord-link/DiscordLink.js';

packages/react/src/index.ts

@@ -17,6 +17,7 @@ export const DiscordEmbedDescription = createReactComponent('discord-embed-descr
 export const DiscordEmbedField = createReactComponent('discord-embed-field', ReactComponents.DiscordEmbedField);
 export const DiscordEmbedFields = createReactComponent('discord-embed-fields', ReactComponents.DiscordEmbedFields);
 export const DiscordEmbedFooter = createReactComponent('discord-embed-footer', ReactComponents.DiscordEmbedFooter);
+export const DiscordHeader = createReactComponent('discord-header', ReactComponents.DiscordHeader);
 export const DiscordInvite = createReactComponent('discord-invite', ReactComponents.DiscordInvite);
 export const DiscordItalic = createReactComponent('discord-italic', ReactComponents.DiscordItalic);
 export const DiscordLink = createReactComponent('discord-link', ReactComponents.DiscordLink);