Skip to content

Commit 4536363

Browse files
RobbertRobbert
committed
feat: ordered and unordered list item web component
1 parent 94830f6 commit 4536363

File tree

10 files changed

+254
-0
lines changed

10 files changed

+254
-0
lines changed

‎packages/storybook-web-component/src/OrderedList.stories.tsx

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
/* @license CC0-1.0 */
2+
3+
import type { Meta, StoryObj } from '@storybook/react';
4+
import readme from '@utrecht/components/ordered-list/README.md?raw';
5+
import tokensDefinition from '@utrecht/components/ordered-list/tokens.json';
6+
import tokens from '@utrecht/design-tokens/dist/index.json';
7+
import { UtrechOrderedList, UtrechOrderedListItem } from '@utrecht/web-component-library-react';
8+
import React from 'react';
9+
import { designTokenStory } from './design-token-story';
10+
11+
const meta = {
12+
title: 'Web Component/Ordered list',
13+
id: 'web-component-ordered-list',
14+
component: UtrechOrderedList,
15+
argTypes: {
16+
children: {
17+
description: 'Items',
18+
},
19+
},
20+
args: {
21+
children: [],
22+
},
23+
tags: ['autodocs'],
24+
parameters: {
25+
status: {
26+
type: 'WORK IN PROGRESS',
27+
},
28+
tokensPrefix: 'utrecht-ordered-list',
29+
tokens,
30+
tokensDefinition,
31+
docs: {
32+
description: {
33+
component: readme,
34+
},
35+
},
36+
},
37+
} satisfies Meta<typeof UtrechOrderedList>;
38+
39+
export default meta;
40+
41+
type Story = StoryObj<typeof meta>;
42+
43+
export const Default: Story = {
44+
args: {
45+
children: ['Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum'].map((item, index) => (
46+
<UtrechOrderedListItem key={index}>{item}</UtrechOrderedListItem>
47+
)),
48+
},
49+
parameters: {
50+
docs: {
51+
description: {
52+
story:
53+
'Avoid this web component, and use the CSS component instead. In Safari 17 `display: contents` is buggy, and because of it `<utrecht-ordered-list>` and `<utrecht-ordered-list-item>` do not result in an accessibe list.',
54+
},
55+
},
56+
},
57+
};
58+
59+
export const DesignTokens = designTokenStory(meta);

‎packages/storybook-web-component/src/UnorderedList.stories.tsx

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
/* @license CC0-1.0 */
2+
3+
import type { Meta, StoryObj } from '@storybook/react';
4+
import readme from '@utrecht/components/unordered-list/README.md?raw';
5+
import tokensDefinition from '@utrecht/components/unordered-list/tokens.json';
6+
import tokens from '@utrecht/design-tokens/dist/index.json';
7+
import { UtrechtUnorderedList, UtrechtUnorderedListItem } from '@utrecht/web-component-library-react';
8+
import React from 'react';
9+
import { designTokenStory } from './design-token-story';
10+
11+
const meta = {
12+
title: 'Web Component/Unordered list',
13+
id: 'web-component-unordered-list',
14+
component: UtrechtUnorderedList,
15+
argTypes: {
16+
children: {
17+
description: 'Items',
18+
},
19+
},
20+
args: {
21+
children: [],
22+
},
23+
tags: ['autodocs'],
24+
parameters: {
25+
status: {
26+
type: 'WORK IN PROGRESS',
27+
},
28+
tokensPrefix: 'utrecht-unordered-list',
29+
tokens,
30+
tokensDefinition,
31+
docs: {
32+
description: {
33+
component: readme,
34+
},
35+
},
36+
},
37+
} satisfies Meta<typeof UtrechtUnorderedList>;
38+
39+
export default meta;
40+
41+
type Story = StoryObj<typeof meta>;
42+
43+
export const Default: Story = {
44+
args: {
45+
children: ['Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum', 'Lorem ipsum'].map((item, index) => (
46+
<UtrechtUnorderedListItem key={index}>{item}</UtrechtUnorderedListItem>
47+
)),
48+
},
49+
parameters: {
50+
docs: {
51+
description: {
52+
story:
53+
'Avoid this web component, and use the CSS component instead. In Safari 17 `display: contents` is buggy, and because of it `<utrecht-unordered-list>` and `<utrecht-unordered-list-item>` do not result in an accessibe list.',
54+
},
55+
},
56+
},
57+
};
58+
59+
export const DesignTokens = designTokenStory(meta);

‎packages/web-component-library-stencil/src/components/ordered-list-item.scss

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/**
2+
* @license EUPL-1.2
3+
* Copyright (c) 2021 Robbert Broersma
4+
*/
5+
6+
@import "~@utrecht/components/ordered-list/css/mixin";
7+
8+
:host {
9+
display: contents;
10+
}
11+
12+
:host([hidden]) {
13+
display: none !important;
14+
}
15+
16+
li {
17+
@include utrecht-ordered-list__item;
18+
}

‎packages/web-component-library-stencil/src/components/ordered-list-item.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { Component, h } from '@stencil/core';
2+
3+
@Component({
4+
tag: 'utrecht-ordered-list-item',
5+
styleUrl: 'ordered-list-item.scss',
6+
shadow: true,
7+
})
8+
export class OrderedListItem {
9+
render() {
10+
return (
11+
<li>
12+
<slot></slot>
13+
</li>
14+
);
15+
}
16+
}

‎packages/web-component-library-stencil/src/components/ordered-list.scss

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/**
2+
* @license EUPL-1.2
3+
* Copyright (c) 2021 Robbert Broersma
4+
*/
5+
6+
@import "~@utrecht/components/ordered-list/css/mixin";
7+
8+
:host {
9+
display: contents;
10+
}
11+
12+
:host([hidden]) {
13+
display: none !important;
14+
}
15+
16+
ol {
17+
@include utrecht-ordered-list;
18+
}

‎packages/web-component-library-stencil/src/components/ordered-list.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { Component, h } from '@stencil/core';
2+
3+
@Component({
4+
tag: 'utrecht-ordered-list',
5+
styleUrl: 'ordered-list.scss',
6+
shadow: true,
7+
})
8+
export class OrderedList {
9+
render() {
10+
return (
11+
<ol>
12+
<slot></slot>
13+
</ol>
14+
);
15+
}
16+
}

‎packages/web-component-library-stencil/src/components/unordered-list-item.scss

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/**
2+
* @license EUPL-1.2
3+
* Copyright (c) 2021 Robbert Broersma
4+
*/
5+
6+
@import "~@utrecht/components/unordered-list/css/mixin";
7+
8+
:host {
9+
display: contents;
10+
}
11+
12+
:host([hidden]) {
13+
display: none !important;
14+
}
15+
16+
li {
17+
@include utrecht-unordered-list__item;
18+
}

‎packages/web-component-library-stencil/src/components/unordered-list-item.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { Component, h } from '@stencil/core';
2+
3+
@Component({
4+
tag: 'utrecht-unordered-list-item',
5+
styleUrl: 'unordered-list-item.scss',
6+
shadow: true,
7+
})
8+
export class UnorderedListItem {
9+
render() {
10+
return (
11+
<li>
12+
<slot></slot>
13+
</li>
14+
);
15+
}
16+
}

‎packages/web-component-library-stencil/src/components/unordered-list.scss

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
/**
2+
* @license EUPL-1.2
3+
* Copyright (c) 2021 Robbert Broersma
4+
*/
5+
6+
@import "~@utrecht/components/unordered-list/css/mixin";
7+
8+
:host {
9+
display: contents;
10+
}
11+
12+
:host([hidden]) {
13+
display: none !important;
14+
}
15+
16+
ul {
17+
@include utrecht-unordered-list;
18+
}

‎packages/web-component-library-stencil/src/components/unordered-list.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { Component, h } from '@stencil/core';
2+
3+
@Component({
4+
tag: 'utrecht-unordered-list',
5+
styleUrl: 'unordered-list.scss',
6+
shadow: true,
7+
})
8+
export class UnorderedList {
9+
render() {
10+
return (
11+
<ul role="list">
12+
<slot></slot>
13+
</ul>
14+
);
15+
}
16+
}

0 commit comments

Comments
 (0)