@ndwnu/design-system 14.2.1 → 14.3.0

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.
Files changed (56) hide show
  1. package/CLAUDE.md +1539 -1525
  2. package/README.md +4 -4
  3. package/assets/icons.ts +83 -83
  4. package/fesm2022/ndwnu-design-system.mjs +260 -220
  5. package/fesm2022/ndwnu-design-system.mjs.map +1 -1
  6. package/package.json +1 -1
  7. package/styles/FONTS.md +46 -46
  8. package/styles/base/_colors.scss +246 -246
  9. package/styles/base/_fonts.scss +13 -13
  10. package/styles/base/_material.scss +17 -17
  11. package/styles/base/_typography.scss +133 -133
  12. package/styles/base/_variables.scss +92 -92
  13. package/styles/base/colors.stories.model.ts +85 -85
  14. package/styles/base/colors.stories.ts +24 -24
  15. package/styles/base/index.scss +5 -5
  16. package/styles/base/typography.stories.ts +111 -111
  17. package/styles/components/_button.scss +133 -133
  18. package/styles/components/_card.scss +3 -3
  19. package/styles/components/_datepicker.scss +134 -134
  20. package/styles/components/_divider.scss +10 -10
  21. package/styles/components/_dropdown.scss +8 -8
  22. package/styles/components/_edit-bar.scss +97 -97
  23. package/styles/components/_filter-button.scss +39 -39
  24. package/styles/components/_guided-tour.scss +70 -70
  25. package/styles/components/_input.scss +253 -253
  26. package/styles/components/_label.scss +23 -23
  27. package/styles/components/_link.scss +36 -36
  28. package/styles/components/_list-item.scss +7 -7
  29. package/styles/components/_map.scss +144 -114
  30. package/styles/components/_menu-button.scss +37 -37
  31. package/styles/components/_popover.scss +19 -19
  32. package/styles/components/_summary-card.scss +205 -183
  33. package/styles/components/_table.scss +8 -8
  34. package/styles/components/divider.stories.ts +80 -80
  35. package/styles/components/index.scss +17 -17
  36. package/styles/components/link.stories.ts +154 -154
  37. package/styles/index.scss +4 -4
  38. package/styles/layout/_grid.scss +165 -165
  39. package/styles/layout/_overlay.scss +7 -7
  40. package/styles/layout/grid.stories.ts +168 -168
  41. package/styles/layout/index.scss +2 -2
  42. package/styles/storybook/_core.scss +60 -60
  43. package/styles/storybook/_reset.scss +21 -21
  44. package/styles/storybook/index.scss +17 -17
  45. package/styles/storybook/overrides/_buttons.scss +95 -95
  46. package/styles/storybook/overrides/_code-previews.scss +97 -97
  47. package/styles/storybook/overrides/_content.scss +24 -24
  48. package/styles/storybook/overrides/_headers.scss +31 -31
  49. package/styles/storybook/overrides/_layout.scss +44 -44
  50. package/styles/storybook/overrides/_table.scss +112 -112
  51. package/styles/storybook/overrides/index.scss +6 -6
  52. package/styles/storybook/overrides.css +355 -355
  53. package/styles/utils/_screenreader.scss +13 -13
  54. package/styles/utils/classes.stories.ts +157 -157
  55. package/styles/utils/index.scss +1 -1
  56. package/types/ndwnu-design-system.d.ts +46 -48
package/styles/base/typography.stories.ts CHANGED
@@ -1,111 +1,111 @@
1
- import { TypographyVariant } from '@ndwnu/core';
2
- import { type Meta, type StoryObj } from '@storybook/angular';
3
-
4
- interface StoryArgs {
5
- typographyList: TypographyVariant[];
6
- }
7
-
8
- const typographyList: TypographyVariant[] = [
9
- {
10
- fontSize: '40px',
11
- fontSizeInRem: '2.5rem',
12
- class: 'ndw-heading-xl',
13
- },
14
- {
15
- fontSize: '32px',
16
- fontSizeInRem: '2rem',
17
- class: 'ndw-heading-lg',
18
- },
19
- {
20
- fontSize: '24px',
21
- fontSizeInRem: '1.5rem',
22
- class: 'ndw-heading-md',
23
- },
24
- {
25
- fontSize: '20px',
26
- fontSizeInRem: '1.25rem',
27
- class: 'ndw-heading-sm',
28
- },
29
- {
30
- fontSize: '18px',
31
- fontSizeInRem: '1.125rem',
32
- class: 'ndw-paragraph-bold-xl',
33
- },
34
- {
35
- fontSize: '18px',
36
- fontSizeInRem: '1.125rem',
37
- class: 'ndw-paragraph-xl',
38
- },
39
- {
40
- fontSize: '16px',
41
- fontSizeInRem: '1rem',
42
- class: 'ndw-paragraph-bold-lg',
43
- },
44
- {
45
- fontSize: '16px',
46
- fontSizeInRem: '1rem',
47
- class: 'ndw-paragraph-lg',
48
- },
49
- {
50
- fontSize: '13px',
51
- fontSizeInRem: '0.8125rem',
52
- class: 'ndw-paragraph-bold-md',
53
- },
54
- {
55
- fontSize: '13px',
56
- fontSizeInRem: '0.8125rem',
57
- class: 'ndw-paragraph-md',
58
- },
59
- {
60
- fontSize: '11px',
61
- fontSizeInRem: '0.6875rem',
62
- class: 'ndw-paragraph-bold-sm',
63
- },
64
- {
65
- fontSize: '11px',
66
- fontSizeInRem: '0.6875rem',
67
- class: 'ndw-paragraph-sm',
68
- },
69
- ];
70
-
71
- const args: StoryArgs = {
72
- typographyList,
73
- };
74
-
75
- const meta: Meta<StoryArgs> = {
76
- title: 'Core/Typography',
77
- render: ({ typographyList, ...props }) => ({
78
- props,
79
- template: `
80
- <div class="sb">
81
- <div class="sb_content overview typography">
82
- <section>
83
- <div class="header">
84
- <p>Font Size</p>
85
- <p>Line Height</p>
86
- <p>CSS Class</p>
87
- </div>
88
- ${typographyList
89
- .map(
90
- (typography: TypographyVariant) => `
91
- <div class="content ${typography.class}">
92
- <span>${typography.fontSize} / ${typography.fontSizeInRem}</span>
93
- <span>150%</span>
94
- <span>.${typography.class}</span>
95
- </div>
96
- `,
97
- )
98
- .join('')}
99
- </section>
100
- </div>
101
- </div>
102
- `,
103
- }),
104
- } as Meta;
105
-
106
- export default meta;
107
- type Story = StoryObj<StoryArgs>;
108
-
109
- export const Typography: Story = {
110
- args,
111
- };
1
+ import { TypographyVariant } from '@ndwnu/core';
2
+ import { type Meta, type StoryObj } from '@storybook/angular';
3
+
4
+ interface StoryArgs {
5
+ typographyList: TypographyVariant[];
6
+ }
7
+
8
+ const typographyList: TypographyVariant[] = [
9
+ {
10
+ fontSize: '40px',
11
+ fontSizeInRem: '2.5rem',
12
+ class: 'ndw-heading-xl',
13
+ },
14
+ {
15
+ fontSize: '32px',
16
+ fontSizeInRem: '2rem',
17
+ class: 'ndw-heading-lg',
18
+ },
19
+ {
20
+ fontSize: '24px',
21
+ fontSizeInRem: '1.5rem',
22
+ class: 'ndw-heading-md',
23
+ },
24
+ {
25
+ fontSize: '20px',
26
+ fontSizeInRem: '1.25rem',
27
+ class: 'ndw-heading-sm',
28
+ },
29
+ {
30
+ fontSize: '18px',
31
+ fontSizeInRem: '1.125rem',
32
+ class: 'ndw-paragraph-bold-xl',
33
+ },
34
+ {
35
+ fontSize: '18px',
36
+ fontSizeInRem: '1.125rem',
37
+ class: 'ndw-paragraph-xl',
38
+ },
39
+ {
40
+ fontSize: '16px',
41
+ fontSizeInRem: '1rem',
42
+ class: 'ndw-paragraph-bold-lg',
43
+ },
44
+ {
45
+ fontSize: '16px',
46
+ fontSizeInRem: '1rem',
47
+ class: 'ndw-paragraph-lg',
48
+ },
49
+ {
50
+ fontSize: '13px',
51
+ fontSizeInRem: '0.8125rem',
52
+ class: 'ndw-paragraph-bold-md',
53
+ },
54
+ {
55
+ fontSize: '13px',
56
+ fontSizeInRem: '0.8125rem',
57
+ class: 'ndw-paragraph-md',
58
+ },
59
+ {
60
+ fontSize: '11px',
61
+ fontSizeInRem: '0.6875rem',
62
+ class: 'ndw-paragraph-bold-sm',
63
+ },
64
+ {
65
+ fontSize: '11px',
66
+ fontSizeInRem: '0.6875rem',
67
+ class: 'ndw-paragraph-sm',
68
+ },
69
+ ];
70
+
71
+ const args: StoryArgs = {
72
+ typographyList,
73
+ };
74
+
75
+ const meta: Meta<StoryArgs> = {
76
+ title: 'Core/Typography',
77
+ render: ({ typographyList, ...props }) => ({
78
+ props,
79
+ template: `
80
+ <div class="sb">
81
+ <div class="sb_content overview typography">
82
+ <section>
83
+ <div class="header">
84
+ <p>Font Size</p>
85
+ <p>Line Height</p>
86
+ <p>CSS Class</p>
87
+ </div>
88
+ ${typographyList
89
+ .map(
90
+ (typography: TypographyVariant) => `
91
+ <div class="content ${typography.class}">
92
+ <span>${typography.fontSize} / ${typography.fontSizeInRem}</span>
93
+ <span>150%</span>
94
+ <span>.${typography.class}</span>
95
+ </div>
96
+ `,
97
+ )
98
+ .join('')}
99
+ </section>
100
+ </div>
101
+ </div>
102
+ `,
103
+ }),
104
+ } as Meta;
105
+
106
+ export default meta;
107
+ type Story = StoryObj<StoryArgs>;
108
+
109
+ export const Typography: Story = {
110
+ args,
111
+ };
package/styles/components/_button.scss CHANGED
@@ -1,133 +1,133 @@
1
- button:not(:disabled) {
2
- cursor: pointer;
3
- }
4
-
5
- [ndwButton] {
6
- align-items: center;
7
- background-color: var(--ndw-color-background);
8
- border: var(--ndw-border-size-sm) solid var(--ndw-color-background);
9
- border-radius: var(--ndw-border-radius-sm);
10
- box-sizing: border-box;
11
- color: var(--ndw-color-foreground);
12
- cursor: pointer;
13
- display: flex;
14
- font-family: var(--ndw-font-family-body);
15
- font-size: var(--ndw-font-size-sm);
16
- font-weight: var(--ndw-font-weight-regular);
17
- gap: var(--ndw-spacing-2xs);
18
- height: var(--ndw-spacing-xl);
19
- justify-content: center;
20
- padding: var(--ndw-spacing-2xs) var(--ndw-spacing-xs);
21
- text-align: start;
22
- text-decoration: none;
23
- transition: (color 200ms ease-out, background-color 200ms ease-out, border-color 200ms ease-out);
24
- width: fit-content;
25
-
26
- ndw-icon {
27
- font-size: var(--ndw-spacing-md);
28
- }
29
-
30
- ndw-loader {
31
- height: var(--ndw-spacing-md);
32
- width: var(--ndw-spacing-md);
33
- }
34
-
35
- &:hover {
36
- background-color: var(--ndw-color-background-hover);
37
- border-color: var(--ndw-color-background-hover);
38
- color: var(--ndw-color-foreground-hover);
39
- }
40
-
41
- &:active {
42
- background-color: var(--ndw-color-background-active);
43
- border-color: var(--ndw-color-background-active);
44
- color: var(--ndw-color-foreground-active);
45
- }
46
-
47
- &[secondary],
48
- &[tertiary] {
49
- background-color: transparent;
50
- color: var(--ndw-color-background);
51
-
52
- &:hover {
53
- color: var(--ndw-color-background);
54
- }
55
-
56
- &:active {
57
- color: var(--ndw-color-background);
58
- }
59
-
60
- &[alternative] {
61
- color: var(--ndw-color-text);
62
-
63
- &:hover {
64
- background-color: var(--ndw-alpha-black-007);
65
- }
66
-
67
- &:active {
68
- background-color: var(--ndw-alpha-black-015);
69
- }
70
- }
71
- }
72
-
73
- &[secondary] {
74
- border-color: var(--ndw-color-background);
75
-
76
- &:hover {
77
- background-color: var(--ndw-alpha-primary-007);
78
- border-color: var(--ndw-color-background-hover);
79
- }
80
-
81
- &:active {
82
- background-color: var(--ndw-alpha-primary-015);
83
- border-color: var(--ndw-color-background-active);
84
- }
85
-
86
- &[alternative] {
87
- border-color: var(--ndw-color-grey-300);
88
-
89
- &:hover {
90
- border-color: var(--ndw-color-grey-500);
91
- }
92
-
93
- &:active {
94
- border-color: var(--ndw-color-grey-700);
95
- }
96
- }
97
- }
98
-
99
- &[tertiary] {
100
- border-color: transparent;
101
- border-radius: var(--button-ter-border-radius, var(--ndw-border-radius-sm));
102
- border-width: var(--button-ter-border-width, var(--ndw-spacing-3xs));
103
- padding-inline: var(--button-ter-padding-inline, var(--ndw-spacing-xs));
104
-
105
- &:hover {
106
- background-color: var(--button-ter-bg-color-hover, var(--ndw-alpha-primary-007));
107
- border-color: var(--button-ter-border-color-hover, transparent);
108
- }
109
-
110
- &:active {
111
- background-color: var(--button-ter-bg-color-active, var(--ndw-alpha-primary-015));
112
- border-color: var(--button-ter-border-color-active, transparent);
113
- }
114
- }
115
-
116
- &[extra-small] {
117
- height: var(--ndw-spacing-lg);
118
- padding-inline: var(--ndw-spacing-2xs);
119
- }
120
-
121
- &[large] {
122
- height: var(--ndw-spacing-2xl);
123
- padding-inline: var(--ndw-spacing-sm);
124
- }
125
-
126
- &[disabled] {
127
- background-color: var(--ndw-color-background-disabled);
128
- border-color: var(--ndw-color-background-disabled);
129
- color: var(--ndw-color-text);
130
- pointer-events: none;
131
- user-select: none;
132
- }
133
- }
1
+ button:not(:disabled) {
2
+ cursor: pointer;
3
+ }
4
+
5
+ [ndwButton] {
6
+ align-items: center;
7
+ background-color: var(--ndw-color-background);
8
+ border: var(--ndw-border-size-sm) solid var(--ndw-color-background);
9
+ border-radius: var(--ndw-border-radius-sm);
10
+ box-sizing: border-box;
11
+ color: var(--ndw-color-foreground);
12
+ cursor: pointer;
13
+ display: flex;
14
+ font-family: var(--ndw-font-family-body);
15
+ font-size: var(--ndw-font-size-sm);
16
+ font-weight: var(--ndw-font-weight-regular);
17
+ gap: var(--ndw-spacing-2xs);
18
+ height: var(--ndw-spacing-xl);
19
+ justify-content: center;
20
+ padding: var(--ndw-spacing-2xs) var(--ndw-spacing-xs);
21
+ text-align: start;
22
+ text-decoration: none;
23
+ transition: (color 200ms ease-out, background-color 200ms ease-out, border-color 200ms ease-out);
24
+ width: fit-content;
25
+
26
+ ndw-icon {
27
+ font-size: var(--ndw-spacing-md);
28
+ }
29
+
30
+ ndw-loader {
31
+ height: var(--ndw-spacing-md);
32
+ width: var(--ndw-spacing-md);
33
+ }
34
+
35
+ &:hover {
36
+ background-color: var(--ndw-color-background-hover);
37
+ border-color: var(--ndw-color-background-hover);
38
+ color: var(--ndw-color-foreground-hover);
39
+ }
40
+
41
+ &:active {
42
+ background-color: var(--ndw-color-background-active);
43
+ border-color: var(--ndw-color-background-active);
44
+ color: var(--ndw-color-foreground-active);
45
+ }
46
+
47
+ &[secondary],
48
+ &[tertiary] {
49
+ background-color: transparent;
50
+ color: var(--ndw-color-background);
51
+
52
+ &:hover {
53
+ color: var(--ndw-color-background);
54
+ }
55
+
56
+ &:active {
57
+ color: var(--ndw-color-background);
58
+ }
59
+
60
+ &[alternative] {
61
+ color: var(--ndw-color-text);
62
+
63
+ &:hover {
64
+ background-color: var(--ndw-alpha-black-007);
65
+ }
66
+
67
+ &:active {
68
+ background-color: var(--ndw-alpha-black-015);
69
+ }
70
+ }
71
+ }
72
+
73
+ &[secondary] {
74
+ border-color: var(--ndw-color-background);
75
+
76
+ &:hover {
77
+ background-color: var(--ndw-alpha-primary-007);
78
+ border-color: var(--ndw-color-background-hover);
79
+ }
80
+
81
+ &:active {
82
+ background-color: var(--ndw-alpha-primary-015);
83
+ border-color: var(--ndw-color-background-active);
84
+ }
85
+
86
+ &[alternative] {
87
+ border-color: var(--ndw-color-grey-300);
88
+
89
+ &:hover {
90
+ border-color: var(--ndw-color-grey-500);
91
+ }
92
+
93
+ &:active {
94
+ border-color: var(--ndw-color-grey-700);
95
+ }
96
+ }
97
+ }
98
+
99
+ &[tertiary] {
100
+ border-color: transparent;
101
+ border-radius: var(--button-ter-border-radius, var(--ndw-border-radius-sm));
102
+ border-width: var(--button-ter-border-width, var(--ndw-spacing-3xs));
103
+ padding-inline: var(--button-ter-padding-inline, var(--ndw-spacing-xs));
104
+
105
+ &:hover {
106
+ background-color: var(--button-ter-bg-color-hover, var(--ndw-alpha-primary-007));
107
+ border-color: var(--button-ter-border-color-hover, transparent);
108
+ }
109
+
110
+ &:active {
111
+ background-color: var(--button-ter-bg-color-active, var(--ndw-alpha-primary-015));
112
+ border-color: var(--button-ter-border-color-active, transparent);
113
+ }
114
+ }
115
+
116
+ &[extra-small] {
117
+ height: var(--ndw-spacing-lg);
118
+ padding-inline: var(--ndw-spacing-2xs);
119
+ }
120
+
121
+ &[large] {
122
+ height: var(--ndw-spacing-2xl);
123
+ padding-inline: var(--ndw-spacing-sm);
124
+ }
125
+
126
+ &[disabled] {
127
+ background-color: var(--ndw-color-background-disabled);
128
+ border-color: var(--ndw-color-background-disabled);
129
+ color: var(--ndw-color-text);
130
+ pointer-events: none;
131
+ user-select: none;
132
+ }
133
+ }
package/styles/components/_card.scss CHANGED
@@ -1,3 +1,3 @@
1
- ndw-card.ng-animating ndw-card-content {
2
- overflow: hidden;
3
- }
1
+ ndw-card.ng-animating ndw-card-content {
2
+ overflow: hidden;
3
+ }