@ndwnu/design-system 14.1.2 → 14.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CLAUDE.md +1525 -1525
- package/README.md +4 -4
- package/assets/icons.ts +83 -83
- package/fesm2022/ndwnu-design-system.mjs +168 -157
- package/fesm2022/ndwnu-design-system.mjs.map +1 -1
- package/package.json +1 -1
- package/styles/FONTS.md +46 -46
- package/styles/base/_colors.scss +246 -246
- package/styles/base/_fonts.scss +13 -13
- package/styles/base/_material.scss +17 -17
- package/styles/base/_typography.scss +133 -133
- package/styles/base/_variables.scss +92 -92
- package/styles/base/colors.stories.model.ts +85 -85
- package/styles/base/colors.stories.ts +24 -24
- package/styles/base/index.scss +5 -5
- package/styles/base/typography.stories.ts +111 -111
- package/styles/components/_button.scss +133 -133
- package/styles/components/_card.scss +3 -3
- package/styles/components/_datepicker.scss +134 -134
- package/styles/components/_divider.scss +10 -10
- package/styles/components/_dropdown.scss +8 -8
- package/styles/components/_edit-bar.scss +97 -97
- package/styles/components/_filter-button.scss +39 -39
- package/styles/components/_guided-tour.scss +70 -70
- package/styles/components/_input.scss +253 -253
- package/styles/components/_label.scss +23 -23
- package/styles/components/_link.scss +36 -36
- package/styles/components/_list-item.scss +7 -7
- package/styles/components/_map.scss +114 -114
- package/styles/components/_menu-button.scss +37 -37
- package/styles/components/_popover.scss +19 -19
- package/styles/components/_summary-card.scss +183 -183
- package/styles/components/_table.scss +8 -8
- package/styles/components/divider.stories.ts +80 -80
- package/styles/components/index.scss +17 -17
- package/styles/components/link.stories.ts +154 -154
- package/styles/index.scss +4 -4
- package/styles/layout/_grid.scss +165 -165
- package/styles/layout/_overlay.scss +7 -7
- package/styles/layout/grid.stories.ts +168 -168
- package/styles/layout/index.scss +2 -2
- package/styles/storybook/_core.scss +60 -60
- package/styles/storybook/_reset.scss +21 -21
- package/styles/storybook/index.scss +17 -17
- package/styles/storybook/overrides/_buttons.scss +95 -95
- package/styles/storybook/overrides/_code-previews.scss +97 -97
- package/styles/storybook/overrides/_content.scss +24 -24
- package/styles/storybook/overrides/_headers.scss +31 -31
- package/styles/storybook/overrides/_layout.scss +44 -44
- package/styles/storybook/overrides/_table.scss +112 -112
- package/styles/storybook/overrides/index.scss +6 -6
- package/styles/storybook/overrides.css +355 -355
- package/styles/utils/_screenreader.scss +13 -13
- package/styles/utils/classes.stories.ts +157 -157
- package/styles/utils/index.scss +1 -1
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
.sr-only {
|
|
2
|
-
position: absolute;
|
|
3
|
-
|
|
4
|
-
overflow: hidden;
|
|
5
|
-
width: 1px;
|
|
6
|
-
height: 1px;
|
|
7
|
-
padding: 0;
|
|
8
|
-
margin: -1px;
|
|
9
|
-
border-width: 0;
|
|
10
|
-
white-space: nowrap;
|
|
11
|
-
|
|
12
|
-
clip: rect(0, 0, 0, 0);
|
|
13
|
-
}
|
|
1
|
+
.sr-only {
|
|
2
|
+
position: absolute;
|
|
3
|
+
|
|
4
|
+
overflow: hidden;
|
|
5
|
+
width: 1px;
|
|
6
|
+
height: 1px;
|
|
7
|
+
padding: 0;
|
|
8
|
+
margin: -1px;
|
|
9
|
+
border-width: 0;
|
|
10
|
+
white-space: nowrap;
|
|
11
|
+
|
|
12
|
+
clip: rect(0, 0, 0, 0);
|
|
13
|
+
}
|
|
@@ -1,157 +1,157 @@
|
|
|
1
|
-
import { Meta, StoryObj } from '@storybook/angular';
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* The util classes here are made in order to replace bootstrap or tailwind implementations. <br>
|
|
5
|
-
* This way we can avoid dependencies on external libraries and keep our design system consistent. <br>
|
|
6
|
-
* Also this way we can give our own spacing and scale interpretation which is more in line with our design system.
|
|
7
|
-
*
|
|
8
|
-
* Below is a representation of the util classes in our design system. <br>
|
|
9
|
-
* Are you missing a util class? Then please contact us so we can improve this.
|
|
10
|
-
*/
|
|
11
|
-
|
|
12
|
-
const meta: Meta = {
|
|
13
|
-
title: 'Core/Util classes',
|
|
14
|
-
tags: ['autodocs', 'ndw', 'ntm', 'nwb'],
|
|
15
|
-
parameters: {
|
|
16
|
-
viewport: {
|
|
17
|
-
defaultViewport: 'mobile',
|
|
18
|
-
},
|
|
19
|
-
},
|
|
20
|
-
render: () => ({
|
|
21
|
-
template: `
|
|
22
|
-
<style>
|
|
23
|
-
.demo-box {
|
|
24
|
-
background: var(--ndw-color-primary-050);
|
|
25
|
-
border: 1px solid var(--ndw-color-primary-500);
|
|
26
|
-
padding: 0.5rem;
|
|
27
|
-
text-align: center;
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
.demo-container {
|
|
31
|
-
background: var(--ndw-color-grey-100);
|
|
32
|
-
border: 1px dashed var(--ndw-color-grey-500);
|
|
33
|
-
}
|
|
34
|
-
</style>
|
|
35
|
-
|
|
36
|
-
<div class="d-flex flex-column gap-4 p-3">
|
|
37
|
-
|
|
38
|
-
<!-- Display & Flex -->
|
|
39
|
-
<section>
|
|
40
|
-
<h3>Display & Flex</h3>
|
|
41
|
-
<div class="demo-container d-flex gap-2 p-2">
|
|
42
|
-
<div class="demo-box">d-flex</div>
|
|
43
|
-
<div class="demo-box">gap-2</div>
|
|
44
|
-
<div class="demo-box">flex-row</div>
|
|
45
|
-
</div>
|
|
46
|
-
</section>
|
|
47
|
-
|
|
48
|
-
<!-- Flex direction -->
|
|
49
|
-
<section>
|
|
50
|
-
<h3>Flex direction</h3>
|
|
51
|
-
<div class="demo-container d-flex flex-column gap-1 p-2">
|
|
52
|
-
<div class="demo-box">d-flex</div>
|
|
53
|
-
<div class="demo-box">flex-column</div>
|
|
54
|
-
<div class="demo-box">gap-1</div>
|
|
55
|
-
</div>
|
|
56
|
-
</section>
|
|
57
|
-
|
|
58
|
-
<!-- Justify content -->
|
|
59
|
-
<section>
|
|
60
|
-
<h3>Justify content</h3>
|
|
61
|
-
<div class="demo-container d-flex justify-content-between p-2">
|
|
62
|
-
<div class="demo-box">justify-content-between</div>
|
|
63
|
-
<div class="demo-box">justify-content-between</div>
|
|
64
|
-
</div>
|
|
65
|
-
<div class="demo-container d-flex justify-content-start p-2">
|
|
66
|
-
<div class="demo-box">justify-content-start</div>
|
|
67
|
-
</div>
|
|
68
|
-
<div class="demo-container d-flex justify-content-end p-2">
|
|
69
|
-
<div class="demo-box">justify-content-end</div>
|
|
70
|
-
</div>
|
|
71
|
-
</section>
|
|
72
|
-
|
|
73
|
-
<!-- Align items -->
|
|
74
|
-
<section>
|
|
75
|
-
<h3>Align items</h3>
|
|
76
|
-
<div class="demo-container d-flex align-items-center p-2" style="height: 80px;">
|
|
77
|
-
<div class="demo-box">align-items-center</div>
|
|
78
|
-
</div>
|
|
79
|
-
<div class="demo-container d-flex align-items-start p-2" style="height: 80px;">
|
|
80
|
-
<div class="demo-box">align-items-start</div>
|
|
81
|
-
</div>
|
|
82
|
-
<div class="demo-container d-flex align-items-end p-2" style="height: 80px;">
|
|
83
|
-
<div class="demo-box">align-items-end</div>
|
|
84
|
-
</div>
|
|
85
|
-
</section>
|
|
86
|
-
|
|
87
|
-
<!-- Spacing utilities -->
|
|
88
|
-
<section>
|
|
89
|
-
<h3>Spacing (margin, padding, gap)</h3>
|
|
90
|
-
|
|
91
|
-
<div class="demo-container p-3">
|
|
92
|
-
<div class="demo-box mb-2">mb-2</div>
|
|
93
|
-
<div class="demo-box mt-2">mt-2</div>
|
|
94
|
-
</div>
|
|
95
|
-
<div class="demo-container p-3">
|
|
96
|
-
<div class="p-2">
|
|
97
|
-
<div class="demo-box">p-2</div>
|
|
98
|
-
</div>
|
|
99
|
-
<div class="pt-2">
|
|
100
|
-
<div class="demo-box">pt-2</div>
|
|
101
|
-
</div>
|
|
102
|
-
<div class="pb-2">
|
|
103
|
-
<div class="demo-box">pb-2</div>
|
|
104
|
-
</div>
|
|
105
|
-
</div>
|
|
106
|
-
|
|
107
|
-
<div class="demo-container d-flex justify-content-center align-items-center m-auto" style="height: 80px;">
|
|
108
|
-
<div class="demo-box">m-auto</div>
|
|
109
|
-
</div>
|
|
110
|
-
|
|
111
|
-
<div class="demo-container d-flex gap-3 p-2 mt-2">
|
|
112
|
-
<div class="demo-box">gap-3</div>
|
|
113
|
-
<div class="demo-box">gap-3</div>
|
|
114
|
-
<div class="demo-box">gap-3</div>
|
|
115
|
-
</div>
|
|
116
|
-
</section>
|
|
117
|
-
|
|
118
|
-
<!-- Width / height -->
|
|
119
|
-
<section>
|
|
120
|
-
<h3>Width & Height</h3>
|
|
121
|
-
<div class="demo-container p-2" style="height: 100px;">
|
|
122
|
-
<div class="demo-box w-100 h-100">
|
|
123
|
-
w-100 / h-100
|
|
124
|
-
</div>
|
|
125
|
-
</div>
|
|
126
|
-
<div class="demo-container p-2" style="height: 100px;width: 200px;">
|
|
127
|
-
<div class="demo-box w-auto h-auto">
|
|
128
|
-
w-auto h-auto
|
|
129
|
-
</div>
|
|
130
|
-
</div>
|
|
131
|
-
</section>
|
|
132
|
-
|
|
133
|
-
<!-- Text utilities -->
|
|
134
|
-
<section>
|
|
135
|
-
<h3>Text alignment</h3>
|
|
136
|
-
<div class="demo-container p-2">
|
|
137
|
-
<div class="text-start">
|
|
138
|
-
<span class="demo-box">text-start</span>
|
|
139
|
-
</div>
|
|
140
|
-
<div class="text-center">
|
|
141
|
-
<span class="demo-box">text-center</span>
|
|
142
|
-
</div>
|
|
143
|
-
<div class="text-end">
|
|
144
|
-
<span class="demo-box">text-end</span>
|
|
145
|
-
</div>
|
|
146
|
-
</div>
|
|
147
|
-
</section>
|
|
148
|
-
|
|
149
|
-
</div>
|
|
150
|
-
`,
|
|
151
|
-
}),
|
|
152
|
-
};
|
|
153
|
-
|
|
154
|
-
export default meta;
|
|
155
|
-
type Story = StoryObj;
|
|
156
|
-
|
|
157
|
-
export const Default: Story = {};
|
|
1
|
+
import { Meta, StoryObj } from '@storybook/angular';
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* The util classes here are made in order to replace bootstrap or tailwind implementations. <br>
|
|
5
|
+
* This way we can avoid dependencies on external libraries and keep our design system consistent. <br>
|
|
6
|
+
* Also this way we can give our own spacing and scale interpretation which is more in line with our design system.
|
|
7
|
+
*
|
|
8
|
+
* Below is a representation of the util classes in our design system. <br>
|
|
9
|
+
* Are you missing a util class? Then please contact us so we can improve this.
|
|
10
|
+
*/
|
|
11
|
+
|
|
12
|
+
const meta: Meta = {
|
|
13
|
+
title: 'Core/Util classes',
|
|
14
|
+
tags: ['autodocs', 'ndw', 'ntm', 'nwb'],
|
|
15
|
+
parameters: {
|
|
16
|
+
viewport: {
|
|
17
|
+
defaultViewport: 'mobile',
|
|
18
|
+
},
|
|
19
|
+
},
|
|
20
|
+
render: () => ({
|
|
21
|
+
template: `
|
|
22
|
+
<style>
|
|
23
|
+
.demo-box {
|
|
24
|
+
background: var(--ndw-color-primary-050);
|
|
25
|
+
border: 1px solid var(--ndw-color-primary-500);
|
|
26
|
+
padding: 0.5rem;
|
|
27
|
+
text-align: center;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.demo-container {
|
|
31
|
+
background: var(--ndw-color-grey-100);
|
|
32
|
+
border: 1px dashed var(--ndw-color-grey-500);
|
|
33
|
+
}
|
|
34
|
+
</style>
|
|
35
|
+
|
|
36
|
+
<div class="d-flex flex-column gap-4 p-3">
|
|
37
|
+
|
|
38
|
+
<!-- Display & Flex -->
|
|
39
|
+
<section>
|
|
40
|
+
<h3>Display & Flex</h3>
|
|
41
|
+
<div class="demo-container d-flex gap-2 p-2">
|
|
42
|
+
<div class="demo-box">d-flex</div>
|
|
43
|
+
<div class="demo-box">gap-2</div>
|
|
44
|
+
<div class="demo-box">flex-row</div>
|
|
45
|
+
</div>
|
|
46
|
+
</section>
|
|
47
|
+
|
|
48
|
+
<!-- Flex direction -->
|
|
49
|
+
<section>
|
|
50
|
+
<h3>Flex direction</h3>
|
|
51
|
+
<div class="demo-container d-flex flex-column gap-1 p-2">
|
|
52
|
+
<div class="demo-box">d-flex</div>
|
|
53
|
+
<div class="demo-box">flex-column</div>
|
|
54
|
+
<div class="demo-box">gap-1</div>
|
|
55
|
+
</div>
|
|
56
|
+
</section>
|
|
57
|
+
|
|
58
|
+
<!-- Justify content -->
|
|
59
|
+
<section>
|
|
60
|
+
<h3>Justify content</h3>
|
|
61
|
+
<div class="demo-container d-flex justify-content-between p-2">
|
|
62
|
+
<div class="demo-box">justify-content-between</div>
|
|
63
|
+
<div class="demo-box">justify-content-between</div>
|
|
64
|
+
</div>
|
|
65
|
+
<div class="demo-container d-flex justify-content-start p-2">
|
|
66
|
+
<div class="demo-box">justify-content-start</div>
|
|
67
|
+
</div>
|
|
68
|
+
<div class="demo-container d-flex justify-content-end p-2">
|
|
69
|
+
<div class="demo-box">justify-content-end</div>
|
|
70
|
+
</div>
|
|
71
|
+
</section>
|
|
72
|
+
|
|
73
|
+
<!-- Align items -->
|
|
74
|
+
<section>
|
|
75
|
+
<h3>Align items</h3>
|
|
76
|
+
<div class="demo-container d-flex align-items-center p-2" style="height: 80px;">
|
|
77
|
+
<div class="demo-box">align-items-center</div>
|
|
78
|
+
</div>
|
|
79
|
+
<div class="demo-container d-flex align-items-start p-2" style="height: 80px;">
|
|
80
|
+
<div class="demo-box">align-items-start</div>
|
|
81
|
+
</div>
|
|
82
|
+
<div class="demo-container d-flex align-items-end p-2" style="height: 80px;">
|
|
83
|
+
<div class="demo-box">align-items-end</div>
|
|
84
|
+
</div>
|
|
85
|
+
</section>
|
|
86
|
+
|
|
87
|
+
<!-- Spacing utilities -->
|
|
88
|
+
<section>
|
|
89
|
+
<h3>Spacing (margin, padding, gap)</h3>
|
|
90
|
+
|
|
91
|
+
<div class="demo-container p-3">
|
|
92
|
+
<div class="demo-box mb-2">mb-2</div>
|
|
93
|
+
<div class="demo-box mt-2">mt-2</div>
|
|
94
|
+
</div>
|
|
95
|
+
<div class="demo-container p-3">
|
|
96
|
+
<div class="p-2">
|
|
97
|
+
<div class="demo-box">p-2</div>
|
|
98
|
+
</div>
|
|
99
|
+
<div class="pt-2">
|
|
100
|
+
<div class="demo-box">pt-2</div>
|
|
101
|
+
</div>
|
|
102
|
+
<div class="pb-2">
|
|
103
|
+
<div class="demo-box">pb-2</div>
|
|
104
|
+
</div>
|
|
105
|
+
</div>
|
|
106
|
+
|
|
107
|
+
<div class="demo-container d-flex justify-content-center align-items-center m-auto" style="height: 80px;">
|
|
108
|
+
<div class="demo-box">m-auto</div>
|
|
109
|
+
</div>
|
|
110
|
+
|
|
111
|
+
<div class="demo-container d-flex gap-3 p-2 mt-2">
|
|
112
|
+
<div class="demo-box">gap-3</div>
|
|
113
|
+
<div class="demo-box">gap-3</div>
|
|
114
|
+
<div class="demo-box">gap-3</div>
|
|
115
|
+
</div>
|
|
116
|
+
</section>
|
|
117
|
+
|
|
118
|
+
<!-- Width / height -->
|
|
119
|
+
<section>
|
|
120
|
+
<h3>Width & Height</h3>
|
|
121
|
+
<div class="demo-container p-2" style="height: 100px;">
|
|
122
|
+
<div class="demo-box w-100 h-100">
|
|
123
|
+
w-100 / h-100
|
|
124
|
+
</div>
|
|
125
|
+
</div>
|
|
126
|
+
<div class="demo-container p-2" style="height: 100px;width: 200px;">
|
|
127
|
+
<div class="demo-box w-auto h-auto">
|
|
128
|
+
w-auto h-auto
|
|
129
|
+
</div>
|
|
130
|
+
</div>
|
|
131
|
+
</section>
|
|
132
|
+
|
|
133
|
+
<!-- Text utilities -->
|
|
134
|
+
<section>
|
|
135
|
+
<h3>Text alignment</h3>
|
|
136
|
+
<div class="demo-container p-2">
|
|
137
|
+
<div class="text-start">
|
|
138
|
+
<span class="demo-box">text-start</span>
|
|
139
|
+
</div>
|
|
140
|
+
<div class="text-center">
|
|
141
|
+
<span class="demo-box">text-center</span>
|
|
142
|
+
</div>
|
|
143
|
+
<div class="text-end">
|
|
144
|
+
<span class="demo-box">text-end</span>
|
|
145
|
+
</div>
|
|
146
|
+
</div>
|
|
147
|
+
</section>
|
|
148
|
+
|
|
149
|
+
</div>
|
|
150
|
+
`,
|
|
151
|
+
}),
|
|
152
|
+
};
|
|
153
|
+
|
|
154
|
+
export default meta;
|
|
155
|
+
type Story = StoryObj;
|
|
156
|
+
|
|
157
|
+
export const Default: Story = {};
|
package/styles/utils/index.scss
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@forward 'screenreader';
|
|
1
|
+
@forward 'screenreader';
|