diff --git a/packages/core/demo/index.html b/packages/core/demo/index.html index e5326f245..14a7e54d7 100644 --- a/packages/core/demo/index.html +++ b/packages/core/demo/index.html @@ -113,19 +113,6 @@

@skyra/discord-components-core

-

List items

- - - - This is the top item - - This is the first nested item - This is the second nested item - - - - -

A normal conversation

Hey guys, I'm new here! Glad to be able to join you all! @@ -602,9 +589,23 @@

Headers

 +

Ordered list items

+ + + + This is an ordered list item + + You can start your list item at a custom number + We will calculate the length internally + This whole level is considered to have a start number length of 3 + + + + +

Unordered list items

- + Discord diff --git a/packages/core/package.json b/packages/core/package.json index 20d1c006c..6d84d549d 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -33,6 +33,7 @@ "./discord-mention.js": "./dist/components/discord-mention/DiscordMention.js", "./discord-message.js": "./dist/components/discord-message/DiscordMessage.js", "./discord-messages.js": "./dist/components/discord-messages/DiscordMessages.js", + "./discord-ordered-list.js": "./dist/components/discord-ordered-list/DiscordOrderedList.js", "./discord-pre.js": "./dist/components/discord-pre/DiscordPre.js", "./discord-quote.js": "./dist/components/discord-quote/DiscordQuote.js", "./discord-reaction.js": "./dist/components/discord-reaction/DiscordReaction.js", @@ -71,6 +72,7 @@ "./dist/components/discord-mention/DiscordMention.js", "./dist/components/discord-message/DiscordMessage.js", "./dist/components/discord-messages/DiscordMessages.js", + "./dist/components/discord-ordered-list/DiscordOrderedList.js", "./dist/components/discord-pre/DiscordPre.js", "./dist/components/discord-quote/DiscordQuote.js", "./dist/components/discord-reaction/DiscordReaction.js", diff --git a/packages/core/src/components/discord-ordered-list/DiscordOrderedList.ts b/packages/core/src/components/discord-ordered-list/DiscordOrderedList.ts new file mode 100644 index 000000000..5937eadc3 --- /dev/null +++ b/packages/core/src/components/discord-ordered-list/DiscordOrderedList.ts @@ -0,0 +1,79 @@ +import { css, html, LitElement } from 'lit'; +import { customElement, property, state } from 'lit/decorators.js'; +import { DiscordComponentsError } from '../../util.js'; + +@customElement('discord-ordered-list') +export class DiscordOrderedList extends LitElement { + public static override styles = css` + :host > ol { + list-style-image: initial; + list-style-type: decimal; + list-style-position: outside; + margin-bottom: 0px; + margin-top: 4px; + margin-right: 0px; + margin-left: calc(0.4em + 0.6em * var(--totalCharacters)); + padding: 0px; + } + `; + + /** + * The starting number for the ordered list. + * + * You can set this to start the list at a specific number + * + * @default 1 + */ + @property({ type: Number, reflect: true }) + public accessor start = 1; + + @state() + private accessor startLength = 1; + + public checkChildren() { + const allChildrenAreListItems = Array.from(this.children).every((child) => { + const tagNameLowerCase = child.tagName.toLowerCase(); + return ( + tagNameLowerCase === 'discord-list-item' || + tagNameLowerCase === 'discord-unordered-list' || + tagNameLowerCase === 'discord-ordered-list' + ); + }); + + if (!allChildrenAreListItems) { + throw new DiscordComponentsError( + 'All direct children inside of a components must be one of , , or .' + ); + } + } + + /** + * Checks how many children of `` this component has and updates + * the {@link DiscordOrderedList.startLength startLength} state. + */ + protected override willUpdate(): void { + const amountOfListItems = Array.from(this.children).filter((child) => { + return child.tagName.toLowerCase() === 'discord-list-item'; + }).length; + + const totalCount = this.start + amountOfListItems; + + this.startLength = totalCount.toString().length; + } + + protected override render() { + this.checkChildren(); + + // We disable the eslint rule here because users should use the component inside of this component. + // eslint-disable-next-line lit-a11y/list + return html`
    + +
`; + } +} + +declare global { + interface HTMLElementTagNameMap { + 'discord-ordered-list': DiscordOrderedList; + } +} diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index d072ec104..d3c3351a7 100644 --- a/packages/core/src/index.ts +++ b/packages/core/src/index.ts @@ -24,6 +24,7 @@ export { DiscordListItem } from './components/discord-list-item/DiscordListItem. export { DiscordMention } from './components/discord-mention/DiscordMention.js'; export { DiscordMessage } from './components/discord-message/DiscordMessage.js'; export { DiscordMessages } from './components/discord-messages/DiscordMessages.js'; +export { DiscordOrderedList } from './components/discord-ordered-list/DiscordOrderedList.js'; export { DiscordPre } from './components/discord-pre/DiscordPre.js'; export { DiscordQuote } from './components/discord-quote/DiscordQuote.js'; export { DiscordReaction } from './components/discord-reaction/DiscordReaction.js'; diff --git a/packages/react/src/index.ts b/packages/react/src/index.ts index d72be9913..6409377f1 100644 --- a/packages/react/src/index.ts +++ b/packages/react/src/index.ts @@ -25,6 +25,7 @@ export const DiscordListItem = createReactComponent('discord-list-item', ReactCo export const DiscordMention = createReactComponent('discord-mention', ReactComponents.DiscordMention); export const DiscordMessage = createReactComponent('discord-message', ReactComponents.DiscordMessage); export const DiscordMessages = createReactComponent('discord-messages', ReactComponents.DiscordMessages); +export const DiscordOrderedList = createReactComponent('discord-ordered-list', ReactComponents.DiscordOrderedList); export const DiscordPre = createReactComponent('discord-pre', ReactComponents.DiscordPre); export const DiscordQuote = createReactComponent('discord-quote', ReactComponents.DiscordQuote); export const DiscordReaction = createReactComponent('discord-reaction', ReactComponents.DiscordReaction);