feat: add components for list item, unordered, and ordered lists

src/components/ListItem.tsx

@@ -0,0 +1,18 @@
+import cx from 'classnames';
+
+import type { ComponentChild, FunctionalComponent } from 'preact';
+
+interface Props {
+	class?: string;
+	children: ComponentChild;
+}
+
+export const ListItem: FunctionalComponent<Props> = ({ class: className, children, ...props }) => {
+	const classes = cx('mbe-2', className);
+
+	return (
+		<li class={classes} {...props}>
+			{children}
+		</li>
+	);
+};

src/components/OrderedList.tsx

@@ -0,0 +1,25 @@
+import cx from 'classnames';
+
+import type { ComponentChild, FunctionalComponent } from 'preact';
+
+interface Props {
+	class?: string;
+	children: ComponentChild;
+}
+
+export const OrderedList: FunctionalComponent<Props> = ({
+	class: className,
+	children,
+	...props
+}) => {
+	const classes = cx(
+		'list-decimal text-3 mbe-12 pis-[1.5rem] md:pis-0 [li>&]:mbe-0 [li>&]:pis-[1.5rem]',
+		className
+	);
+
+	return (
+		<ol class={classes} {...props}>
+			{children}
+		</ol>
+	);
+};

src/components/UnorderedList.tsx

@@ -0,0 +1,25 @@
+import cx from 'classnames';
+
+import type { ComponentChild, FunctionalComponent } from 'preact';
+
+interface Props {
+	class?: string;
+	children: ComponentChild;
+}
+
+export const UnorderedList: FunctionalComponent<Props> = ({
+	class: className,
+	children,
+	...props
+}) => {
+	const classes = cx(
+		'list-square text-3 mbe-12 pis-[1.5rem] md:pis-0 [li>&]:mbe-0 [li>&]:pis-[1.5rem]',
+		className
+	);
+
+	return (
+		<ul class={classes} {...props}>
+			{children}
+		</ul>
+	);
+};

src/components/index.ts

@@ -1,8 +1,11 @@
 export * from './Headline';
 export * from './LegalDate';
 export * from './Link';
+export * from './ListItem';
+export * from './OrderedList';
 export * from './Subheadline';
 export * from './Subsubheadline';
 export * from './Text';
 export * from './TextLink';
 export * from './Title';
+export * from './UnorderedList';

src/mdx-components.ts

@@ -1,4 +1,14 @@
-import { Headline, Subheadline, Subsubheadline, Text, TextLink, Title } from './components';
+import {
+	Headline,
+	ListItem,
+	OrderedList,
+	Subheadline,
+	Subsubheadline,
+	Text,
+	TextLink,
+	Title,
+	UnorderedList,
+} from './components';
 
 export const mapping = {
 	a: TextLink,
@@ -8,5 +18,8 @@ export const mapping = {
 	h4: Subsubheadline,
 	h5: Subsubheadline,
 	h6: Subsubheadline,
+	li: ListItem,
+	ol: OrderedList,
 	p: Text,
+	ul: UnorderedList,
 };