feat(elements): lists

docs/ELEMENTS.md

@@ -4,7 +4,7 @@ The following elements are available:
 
 * **Container:** `Border`, `Panel`, `Modal`, `Navigation`
 * **Layout:** `Grid`, `Column`, `Row`, `Cell`
-* **Text:** `Title`, `Paragraph`, `Text`
+* **Text:** `Title`, `Paragraph`, `Text`, `List`
 * **Interaction:** `Button`, `Clickarea`, `Link`
 * **Form:** `Form`, `Input`, `Label`, `DateTime`, `Select`, `TextArea`, `TextBox`, `CheckBox`
 * **Graphic:** `Avatar`, `Icon`, `Image`
@@ -373,7 +373,7 @@ Properties:
 - **type** - `primary` | `secondary` (optional, default `primary`)
 - **size** - `small` | `medium` | `large` (optional, default `medium`)
 - **weight** - `light` | `normal` | `bold` (optional, default `normal`)
-- **wrap** - `none` | `normal` | `break-word` (optional, default `none`)
+- **wrap** - `none` | `normal` | `break-word` (optional, default `normal`)
 
 Example:
 
@@ -392,6 +392,35 @@ Customization options (selector: `.text`):
 - `--size-large` (default: `var(--element-font-large)`)
 - weights are defined at global level.
 
+### List
+
+Element for ordered and unordered lists.
+
+`List` properties:
+
+- **type** - `ordered` | `unordered` (required)
+- **size** - `small` | `medium` | `large` (optional, default `medium`)
+- **children** - `ReactElement<List.Item>` (required)
+
+`List.Item` properties:
+
+- **children** - ReactNode
+
+Example:
+
+```tsx
+import { List } from '@maskingtech/designsystem';
+
+<List type='ordered' size='small'>
+  <List.Item>First</List.Item>
+  <List.Item>Second</List.Item>
+</List>
+```
+
+Customization options (selector: `.list`):
+
+- `--margin` (default: `var(--margin)`)
+
 ## Interaction elements
 
 ### Button

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@maskingtech/designsystem",
   "private": false,
-  "version": "0.0.6",
+  "version": "0.0.7",
   "type": "module",
   "repository": {
     "url": "https://github.com/MaskingTechnology/designsystem"

src/elements/list/Item.tsx

@@ -0,0 +1,11 @@
+
+import type { ReactNode} from 'react';
+
+export type Props = {
+    readonly children?: ReactNode;
+};
+
+export default function Element({ children }: Props)
+{
+    return <li>{children}</li>;
+}

src/elements/list/List.css

@@ -0,0 +1,24 @@
+.mtds
+{
+    .list
+    {
+        --margin: 0;
+
+        margin: var(--margin);
+
+        &.size-small
+        {
+            font-size: var(--size-small);
+        }
+
+        &.size-medium
+        {
+            font-size: var(--size-medium);
+        }
+
+        &.size-large
+        {
+            font-size: var(--size-large);
+        }
+    }
+}

src/elements/list/List.tsx

@@ -0,0 +1,25 @@
+
+import type { ReactElement } from 'react';
+
+import type { Props as ItemProps } from './Item';
+import Item from './Item';
+
+import './List.css';
+
+type Props = {
+    readonly type: 'ordered' | 'unordered';
+    readonly size?: 'small' | 'medium' | 'large';
+    readonly children: ReactElement<ItemProps> | ReactElement<ItemProps>[];
+};
+
+export function List({ type, size = 'medium', children }: Props)
+{
+    const className = 'list'
+        + ' size-' + size;
+
+    return type === 'ordered'
+        ? <ol className={className}>{children}</ol>
+        : <ul className={className}>{children}</ul>;
+}
+
+List.Item = Item;

src/elements/text/Text.tsx

@@ -9,7 +9,7 @@ type Props = {
     readonly wrap?: 'none' | 'normal' | 'break-word';
 };
 
-export function Text({ value, type = 'primary', size = 'medium', weight = 'normal', wrap = 'none' }: Props)
+export function Text({ value, type = 'primary', size = 'medium', weight = 'normal', wrap = 'normal' }: Props)
 {
     const className = 'text'
         + ' type-' + type

src/index.ts

@@ -14,6 +14,7 @@ export { Image } from './elements/image/Image';
 export { Input } from './elements/input/Input';
 export { Label } from './elements/label/Label';
 export { Link } from './elements/link/Link';
+export { List } from './elements/list/List';
 export { Modal } from './elements/modal/Modal';
 export { Navigation } from './elements/navigation/Navigation';
 export { Panel } from './elements/panel/Panel';