diff --git a/packages/core/UPGRADING-TO-V4.md b/packages/core/UPGRADING-TO-V4.md index 32ae693ae..8c58f2ac4 100644 --- a/packages/core/UPGRADING-TO-V4.md +++ b/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 diff --git a/packages/core/package.json b/packages/core/package.json index e57d621b6..7dfb5f2b1 100644 --- a/packages/core/package.json +++ b/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", diff --git a/packages/core/src/components/discord-header/DiscordHeader.ts b/packages/core/src/components/discord-header/DiscordHeader.ts new file mode 100644 index 000000000..de0bc4bcc --- /dev/null +++ b/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`