Skip to content

Commit 03467c0

Browse files
rumenpetrovrumenpetrov
committed
Button component
* Docs * Guide updates * General improvements
1 parent 46aee02 commit 03467c0

23 files changed

+823
-67
lines changed

‎.storybook/preview.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ const preview: Preview = {
1212
// https://storybook.js.org/docs/writing-stories/naming-components-and-hierarchy#sorting-stories
1313
storySort: {
1414
method: 'alphabetical',
15-
order: ['Welcome', 'Foundations', ['Design principles', 'Design tokens'], 'Web', ['Get started', 'CSS variables', '*'], '*', 'Guides', 'Contribution'],
15+
order: ['Welcome', 'Foundations', ['Design principles', 'Design tokens'], 'Web', ['Get started', 'CSS variables', 'Components', ['Introduction', '*'], 'Labs', ['Introduction', '*'], '*'], '*', 'Guides', 'Contribution'],
1616
},
1717
},
1818
},

‎README.md

+3
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ Web is the main supported platform but the system allows easier extension with m
2828
* [ ] Develop at least one component from the MVP list by following a process
2929

3030
* Phase Next
31+
* [ ] Make automatic documentation for components to work
3132
* [ ] Define and describe versioning
3233
* [ ] More Design principles - Adaptive/Responsive/Accessibility
3334
* [ ] Setup Chromatic with CI
@@ -49,6 +50,8 @@ Web is the main supported platform but the system allows easier extension with m
4950
* https://carbondesignsystem.com/
5051
* https://nordhealth.design/
5152
* https://vaadin.com/design-system
53+
* https://github.com/ing-bank/lion
54+
* https://studio.backlight.dev/edit/5vtJtbY04aoD1dGKcsu1/introduction/?p=doc
5255

5356
#### Technology stack
5457
* [Lit](https://lit.dev/)

‎index.html

+97-4
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,104 @@
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>Vite + Lit + TS</title>
88
<link rel="stylesheet" href="./src/index.css" />
9-
<script type="module" src="/src/components/my-element/my-element.ts"></script>
9+
<script type="module" src="/src/components/button/button.ts"></script>
10+
11+
<style>
12+
.special-button::part(root) {
13+
background-color: aquamarine;
14+
color: #000;
15+
}
16+
</style>
1017
</head>
1118
<body>
12-
<my-element>
13-
<h1>Vite + Lit</h1>
14-
</my-element>
19+
<div>
20+
<wds-button>Button default</wds-button>
21+
<wds-button disabled>Button default disabled</wds-button>
22+
<wds-button danger>Button danger</wds-button>
23+
<wds-button full-width>Button default full-width</wds-button>
24+
<wds-button disabled full-width>Button default disabled full-width</wds-button>
25+
26+
<hr>
27+
28+
<wds-button appearance="accent">Button accent</wds-button>
29+
<wds-button appearance="accent" disabled>Button accent disabled</wds-button>
30+
<wds-button appearance="accent" full-width>Button accent full-width</wds-button>
31+
<wds-button appearance="accent" disabled full-width>Button accent disabled full-width</wds-button>
32+
</div>
33+
34+
<hr>
35+
36+
<form>
37+
<input type="text" name="demo" />
38+
39+
<button>Native button</button>
40+
41+
<wds-button type="button" class="special-button" id="js-special-button">Form Button special</wds-button>
42+
<wds-button type="reset">Form Reset</wds-button>
43+
<wds-button appearance="accent" type="submit">Form Submit</wds-button>
44+
</form>
45+
46+
<wds-button class="button button-primary" data-modal-trigger="1">Open modal</wds-button>
47+
48+
<dialog
49+
class="modal" data-modal="1"
50+
role="alertdialog"
51+
aria-modal="true"
52+
aria-labelledby="confirmation-dialog-title"
53+
aria-describedby="confirmation-dialog-description"
54+
>
55+
<h6 id="confirmation-dialog-title" class="modal-title">Modal title</h6>
56+
57+
<div class="modal-content" id="confirmation-dialog-description">
58+
<p>Modal body text goes here.</p>
59+
</div>
60+
61+
<footer class="modal-footer">
62+
<wds-button class="button button-secondary" data-modal-close="1">Close</wds-button>
63+
<wds-button class="button button-primary" data-modal-close="1">Save changes</wds-button>
64+
</footer>
65+
</dialog>
66+
67+
<script>
68+
const dialogRootElementList = document.querySelectorAll('[data-modal]');
69+
const dialogTriggerElementList = document.querySelectorAll('[data-modal-trigger]');
70+
const dialogCloseElementList = document.querySelectorAll('[data-modal-close]');
71+
72+
if (dialogRootElementList?.length) {
73+
dialogTriggerElementList.forEach((dialogTriggerElementListItem) => {
74+
dialogTriggerElementListItem.addEventListener('click', () => {
75+
const selectedDialogRootElement = [...dialogRootElementList]
76+
.find(dialogRootElementListItem =>
77+
dialogRootElementListItem.dataset?.modal === dialogTriggerElementListItem.dataset?.modalTrigger);
78+
79+
if (selectedDialogRootElement) {
80+
selectedDialogRootElement.showModal();
81+
}
82+
});
83+
});
84+
85+
dialogCloseElementList.forEach((dialogCloseElementListItem) => {
86+
dialogCloseElementListItem.addEventListener('click', () => {
87+
const selectedDialogRootElement = [...dialogRootElementList]
88+
.find(dialogRootElementListItem =>
89+
dialogRootElementListItem.dataset?.modal === dialogCloseElementListItem.dataset?.modalClose);
90+
91+
if (selectedDialogRootElement) {
92+
selectedDialogRootElement.close();
93+
}
94+
});
95+
});
96+
}
97+
</script>
98+
99+
<script>
100+
document.addEventListener("DOMContentLoaded", (event) => {
101+
const specialButtonElement = document.querySelector('#js-special-button');
102+
103+
specialButtonElement.addEventListener('click', (event) => {
104+
console.log('special button click', event);
105+
})
106+
});
107+
</script>
15108
</body>
16109
</html>

‎package-lock.json

+70-8
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,7 @@
3535
"vite": "^5.2.0"
3636
},
3737
"dependencies": {
38+
"@lion/ui": "^0.6.1",
3839
"chromatic": "^11.3.0",
3940
"vite-plugin-dts": "^3.8.1"
4041
}

‎src/assets/design-tokens.json

-22
This file was deleted.

‎src/assets/lit.svg

-1
This file was deleted.

‎src/components/button/button.mdx

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { Meta } from '@storybook/blocks';
2+
import { parts } from './index.ts';
3+
import { componentTokensToWebTokens } from '../../design-tokens';
4+
5+
<Meta title="Web/Labs/Button/Extra" />
6+
7+
# Button
8+
9+
### Web tokens
10+
11+
<table style={{ width: '100%' }}>
12+
<thead align="left">
13+
<tr>
14+
<th>Name</th>
15+
<th>Value</th>
16+
<th>Fallback value</th>
17+
</tr>
18+
</thead>
19+
<tbody>
20+
{componentTokensToWebTokens((tokenName) => tokenName.startsWith('WDS-BUTTON--')).map(({ webTokenName, webTokenValue, mappedWebTokenName }) => (
21+
<tr key={webTokenName}>
22+
<td>{webTokenName}</td>
23+
<td>{webTokenValue}</td>
24+
<td>{mappedWebTokenName || '-'}</td>
25+
</tr>
26+
))}
27+
</tbody>
28+
</table>
29+
30+
### Parts
31+
32+
<table style={{ width: '100%' }}>
33+
<thead align="left">
34+
<tr>
35+
<th>Name</th>
36+
</tr>
37+
</thead>
38+
<tbody>
39+
{Object.keys(parts).map((partName) => (
40+
<tr key={partName}>
41+
<td>{parts[partName]}</td>
42+
</tr>
43+
))}
44+
</tbody>
45+
</table>

0 commit comments

Comments
 (0)