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`

`; + } + case 2: { + return html`

`; + } + case 3: { + return html`

`; + } + } + } +} + +declare global { + interface HTMLElementTagNameMap { + 'discord-header': DiscordHeader; + } +} diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 42dd46476..460f71ed6 100644 --- a/packages/core/src/index.ts +++ b/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'; diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index bd0d12d29..21b823d55 100644 --- a/packages/react/src/index.ts +++ b/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);