sdga-ui 1.0.7 → 1.0.8

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 (33) hide show
  1. package/css/dga-ui.css +24869 -27624
  2. package/css/dga-ui.css.map +1 -1
  3. package/demo-angular/angular.json +3 -0
  4. package/demo-angular/package.json +2 -2
  5. package/demo-angular/src/app/app.html +1 -1
  6. package/demo-angular/src/app/app.routes.ts +0 -4
  7. package/demo-angular/src/app/app.ts +5 -2
  8. package/demo-angular/src/app/shared/code-example/code-example.component.html +1 -1
  9. package/demo-angular/src/app/shared/code-example/code-example.component.ts +12 -1
  10. package/demo-angular/src/app/views/buttons/buttons.component.html +95 -24
  11. package/demo-angular/src/app/views/buttons/buttons.component.scss +0 -3
  12. package/demo-angular/src/app/views/buttons/buttons.component.ts +77 -7
  13. package/demo-angular/src/app/views/footer/footer.html +138 -150
  14. package/demo-angular/src/app/views/footer/footer.ts +200 -66
  15. package/demo-angular/src/app/views/links/links.component.ts +1 -1
  16. package/demo-angular/tsconfig.app.json +2 -1
  17. package/package.json +1 -1
  18. package/theme/_variables.scss +0 -1
  19. package/theme/components/_buttons.scss +1 -302
  20. package/theme/config/_base.scss +1 -1
  21. package/theme/customizations/_alerts.scss +15 -14
  22. package/theme/customizations/_buttons.scss +305 -244
  23. package/theme/customizations/_footer.scss +122 -45
  24. package/theme/customizations/_global.scss +20 -2
  25. package/theme/customizations/_links.scss +45 -44
  26. package/theme/customizations/_toasts.scss +13 -14
  27. package/theme/dga-ui.scss +1 -2
  28. package/demo-angular/src/app/views/contexts/contexts.component.html +0 -204
  29. package/demo-angular/src/app/views/contexts/contexts.component.ts +0 -10
  30. package/demo-angular/src/app/views/footer/footer.scss +0 -0
  31. package/demo-angular/src/app/views/footer/footer.spec.ts +0 -23
  32. package/theme/config/_contexts.scss +0 -471
  33. package/theme/customizations/_contexts.scss +0 -432
package/demo-angular/src/app/views/footer/footer.ts CHANGED
@@ -6,136 +6,270 @@ import { CodeExampleComponent } from '../../shared/code-example/code-example.com
6
6
  selector: 'app-footer',
7
7
  imports: [TranslateModule, CodeExampleComponent],
8
8
  templateUrl: './footer.html',
9
- styleUrl: './footer.scss',
10
9
  })
11
10
  export class Footer {
12
11
  primaryFooterCode = `<footer class="dga-footer on-primary">
13
- <div class="container-fluid">
12
+ <div class="dga-footer-content container-fluid">
14
13
  <!-- Main Footer Content -->
15
- <div class="row dga-list-group-container">
14
+ <div class="dga-footer-nav-wrapper">
16
15
  <!-- Footer Link Groups (5 columns) -->
17
- <div class="col-6 col-md-4 col-lg dga-link-group">
18
- <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Group Label</h6>
16
+ <div class="dga-footer-nav-group">
17
+ <h6 class="dga-footer-section-title">Group Label</h6>
19
18
  <ul class="list-unstyled">
20
19
  <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
21
20
  <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
22
21
  <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
22
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
23
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
24
+ </ul>
25
+ </div>
26
+
27
+ <div class="dga-footer-nav-group">
28
+ <h6 class="dga-footer-section-title">Group Label</h6>
29
+ <ul class="list-unstyled">
30
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
31
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
32
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
33
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
34
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
35
+ </ul>
36
+ </div>
37
+
38
+ <div class="dga-footer-nav-group">
39
+ <h6 class="dga-footer-section-title">Group Label</h6>
40
+ <ul class="list-unstyled">
41
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
42
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
43
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
44
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
45
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
23
46
  </ul>
24
47
  </div>
25
48
 
26
- <div class="col-6 col-md-4 col-lg dga-link-group">
27
- <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Group Label</h6>
49
+ <div class="dga-footer-nav-group">
50
+ <h6 class="dga-footer-section-title">Group Label</h6>
28
51
  <ul class="list-unstyled">
29
52
  <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
30
53
  <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
54
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
55
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
56
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
57
+ </ul>
58
+ </div>
59
+
60
+ <div class="dga-footer-nav-group">
61
+ <h6 class="dga-footer-section-title">Group Label</h6>
62
+ <ul class="list-unstyled">
63
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
64
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
65
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
66
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
67
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
31
68
  </ul>
32
69
  </div>
33
70
 
34
71
  <!-- Social Media & Accessibility -->
35
- <div class="col-12 col-lg-auto">
36
- <div class="dga-social-container">
72
+ <div class="dga-footer-social">
37
73
  <!-- Social Media -->
38
- <div>
39
- <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Social Media</h6>
74
+ <div class="dga-footer-nav-group">
75
+ <h6 class="dga-footer-section-title">Social Media</h6>
40
76
  <div class="d-flex gap-2 flex-wrap">
41
- <button type="button" class="btn btn-outline-secondary btn-icon" aria-label="Twitter">
77
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
42
78
  <i class="bi bi-twitter"></i>
43
- </button>
44
- <button type="button" class="btn btn-outline-secondary btn-icon" aria-label="Facebook">
79
+ </a>
80
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
45
81
  <i class="bi bi-facebook"></i>
46
- </button>
82
+ </a>
83
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
84
+ <i class="bi bi-instagram"></i>
85
+ </a>
86
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
87
+ <i class="bi bi-linkedin"></i>
88
+ </a>
47
89
  </div>
48
90
  </div>
49
91
 
50
92
  <!-- Accessibility Tools -->
51
- <div>
52
- <h6 class="border-bottom border-white border-opacity-25 pb-2 mb-3">Accessibility Tools</h6>
93
+ <div class="dga-footer-nav-group">
94
+ <h6 class="dga-footer-section-title">Accessibility Tools</h6>
53
95
  <div class="d-flex gap-2 flex-wrap">
54
- <button class="btn btn-outline-secondary btn-icon" aria-label="Vision">
96
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
55
97
  <i class="bi bi-eye"></i>
56
- </button>
57
- <button class="btn btn-outline-secondary btn-icon" aria-label="Audio">
98
+ </a>
99
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
58
100
  <i class="bi bi-volume-up"></i>
59
- </button>
101
+ </a>
102
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
103
+ <i class="bi bi-universal-access"></i>
104
+ </a>
60
105
  </div>
61
106
  </div>
62
- </div>
63
107
  </div>
64
108
  </div>
65
109
 
66
110
  <!-- Bottom Footer -->
67
- <div class="dga-footer-bottom">
68
- <div class="row g-4 align-items-center">
69
- <div class="col-lg-8">
70
- <!-- Footer Links Row -->
71
- <div class="dga-footer-bottom-links">
72
- <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
73
- <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
74
- <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
75
- </div>
76
-
77
- <!-- Copyright -->
78
- <div class="dga-footer-copyright">
79
- <p class="fw-semibold small mb-2">All Rights Reserved © 2024</p>
80
- <div class="dga-footer-copyright-links">
81
- <a href="#" class="link-neutral small">Terms and Conditions</a>
82
- <a href="#" class="link-neutral small">Privacy Policy</a>
83
- </div>
84
- </div>
111
+ <div class="dga-footer-meta">
112
+ <div class="dga-footer-meta-content">
113
+ <!-- Footer Links Row -->
114
+ <div class="dga-footer-meta-links">
115
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
116
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
117
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
118
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
119
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
120
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
121
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
122
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
85
123
  </div>
86
124
 
87
- <!-- Logos -->
88
- <div class="col-lg-4">
89
- <div class="dga-logo-container">
90
- <img src="https://placehold.co/125x42" alt="logo">
91
- <img src="https://placehold.co/125x42" alt="logo">
125
+ <!-- Copyright -->
126
+ <div class="dga-footer-copyright-container">
127
+ <p class="dga-footer-copyright">All Right Reserved For Digital Government Authority © 2024</p>
128
+ <div class="dga-footer-legal-links">
129
+ <a href="#" class="link-neutral small">Terms and Conditions</a>
130
+ <a href="#" class="link-neutral small">Privacy Policy</a>
92
131
  </div>
93
132
  </div>
94
133
  </div>
134
+
135
+ <!-- Logos -->
136
+ <div class="dga-footer-logo">
137
+ <img src="https://placehold.co/125x42" alt="logo">
138
+ <img src="https://placehold.co/125x42" alt="logo">
139
+ </div>
95
140
  </div>
96
141
  </div>
97
142
  </footer>`;
98
143
 
99
- secondaryFooterCode = `<footer class="dga-footer on-secondary">
100
- <div class="container-fluid">
144
+ secondaryFooterCode = `<footer class="dga-footer bg-neutral-100">
145
+ <div class="dga-footer-content container-fluid">
101
146
  <!-- Main Footer Content -->
102
- <div class="row dga-list-group-container">
103
- <!-- Footer Link Groups -->
104
- <div class="col-6 col-md-4 col-lg dga-link-group">
105
- <h6 class="border-bottom pb-2 mb-3">Group Label</h6>
147
+ <div class="dga-footer-nav-wrapper">
148
+ <!-- Footer Link Groups (5 columns) -->
149
+ <div class="dga-footer-nav-group">
150
+ <h6 class="dga-footer-section-title">Group Label</h6>
151
+ <ul class="list-unstyled">
152
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
153
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
154
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
155
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
156
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
157
+ </ul>
158
+ </div>
159
+
160
+ <div class="dga-footer-nav-group">
161
+ <h6 class="dga-footer-section-title">Group Label</h6>
162
+ <ul class="list-unstyled">
163
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
164
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
165
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
166
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
167
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
168
+ </ul>
169
+ </div>
170
+
171
+ <div class="dga-footer-nav-group">
172
+ <h6 class="dga-footer-section-title">Group Label</h6>
173
+ <ul class="list-unstyled">
174
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
175
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
176
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
177
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
178
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
179
+ </ul>
180
+ </div>
181
+
182
+ <div class="dga-footer-nav-group">
183
+ <h6 class="dga-footer-section-title">Group Label</h6>
106
184
  <ul class="list-unstyled">
107
185
  <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
108
186
  <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
187
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
188
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
189
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
190
+ </ul>
191
+ </div>
192
+
193
+ <div class="dga-footer-nav-group">
194
+ <h6 class="dga-footer-section-title">Group Label</h6>
195
+ <ul class="list-unstyled">
196
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
197
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
198
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
199
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
200
+ <li class="mb-2"><a href="#" class="link-neutral small">Footer Link</a></li>
109
201
  </ul>
110
202
  </div>
111
203
 
112
204
  <!-- Social Media & Accessibility -->
113
- <div class="col-12 col-lg-auto">
114
- <div class="dga-social-container">
115
- <div>
116
- <h6 class="border-bottom pb-2 mb-3">Social Media</h6>
205
+ <div class="dga-footer-social">
206
+ <!-- Social Media -->
207
+ <div class="dga-footer-nav-group">
208
+ <h6 class="dga-footer-section-title">Social Media</h6>
117
209
  <div class="d-flex gap-2 flex-wrap">
118
- <button type="button" class="btn btn-outline-secondary btn-icon">
210
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
119
211
  <i class="bi bi-twitter"></i>
120
- </button>
212
+ </a>
213
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
214
+ <i class="bi bi-facebook"></i>
215
+ </a>
216
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
217
+ <i class="bi bi-instagram"></i>
218
+ </a>
219
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
220
+ <i class="bi bi-linkedin"></i>
221
+ </a>
222
+ </div>
223
+ </div>
224
+
225
+ <!-- Accessibility Tools -->
226
+ <div class="dga-footer-nav-group">
227
+ <h6 class="dga-footer-section-title">Accessibility Tools</h6>
228
+ <div class="d-flex gap-2 flex-wrap">
229
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
230
+ <i class="bi bi-eye"></i>
231
+ </a>
232
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
233
+ <i class="bi bi-volume-up"></i>
234
+ </a>
235
+ <a href="#" class="btn btn-outline-secondary" aria-label="Download">
236
+ <i class="bi bi-universal-access"></i>
237
+ </a>
121
238
  </div>
122
239
  </div>
123
- </div>
124
240
  </div>
125
241
  </div>
126
242
 
127
243
  <!-- Bottom Footer -->
128
- <div class="dga-footer-bottom">
129
- <div class="row g-4 align-items-center">
130
- <div class="col-lg-8">
131
- <div class="dga-footer-bottom-links">
132
- <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
133
- </div>
134
- <div class="dga-footer-copyright">
135
- <p class="fw-semibold small mb-2">All Rights Reserved © 2024</p>
244
+ <div class="dga-footer-meta">
245
+ <div class="dga-footer-meta-content">
246
+ <!-- Footer Links Row -->
247
+ <div class="dga-footer-meta-links">
248
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
249
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
250
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
251
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
252
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
253
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
254
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
255
+ <a href="#" class="link-neutral text-decoration-underline small">Footer Link</a>
256
+ </div>
257
+
258
+ <!-- Copyright -->
259
+ <div class="dga-footer-copyright-container">
260
+ <p class="dga-footer-copyright">All Right Reserved For Digital Government Authority © 2024</p>
261
+ <div class="dga-footer-legal-links">
262
+ <a href="#" class="link-neutral small">Terms and Conditions</a>
263
+ <a href="#" class="link-neutral small">Privacy Policy</a>
136
264
  </div>
137
265
  </div>
138
266
  </div>
267
+
268
+ <!-- Logos -->
269
+ <div class="dga-footer-logo">
270
+ <img src="https://placehold.co/125x42" alt="logo">
271
+ <img src="https://placehold.co/125x42" alt="logo">
272
+ </div>
139
273
  </div>
140
274
  </div>
141
275
  </footer>`;
package/demo-angular/src/app/views/links/links.component.ts CHANGED
@@ -13,7 +13,7 @@ export class LinksComponent {
13
13
  // Basic link variants (primary, neutral, on-color, disabled)
14
14
  basicLinksCode = `<a href=\"javascript:void(0);\" class=\"link-primary link-offset-2\">Primary link</a>
15
15
  <a href=\"javascript:void(0);\" class=\"link-neutral link-offset-2\">Neutral link</a>
16
- <div class=\"p-3 bg-primary rounded-2\"><a href=\"javascript:void(0);\" class=\"link-oncolor link-offset-2\">On-color link</a></div>
16
+ <div class=\"p-3 on-primary rounded-2\"><a href=\"javascript:void(0);\" class=\"link-neutral link-offset-2\">Neutral link</a></div>
17
17
  <a href=\"javascript:void(0);\" class=\"link-primary disabled link-offset-2\" aria-disabled=\"true\" tabindex=\"-1\">Disabled link</a>`;
18
18
 
19
19
  }
package/demo-angular/tsconfig.app.json CHANGED
@@ -4,7 +4,8 @@
4
4
  "extends": "./tsconfig.json",
5
5
  "compilerOptions": {
6
6
  "outDir": "./out-tsc/app",
7
- "types": []
7
+ "types": [],
8
+ "resolveJsonModule": true
8
9
  },
9
10
  "include": [
10
11
  "src/**/*.ts"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sdga-ui",
3
- "version": "1.0.7",
3
+ "version": "1.0.8",
4
4
  "description": "DGA UI - Government-Style Bootstrap Theme",
5
5
  "keywords": [
6
6
  "sdga",
package/theme/_variables.scss CHANGED
@@ -26,7 +26,6 @@
26
26
  @import 'config/base';
27
27
  @import 'config/effects';
28
28
  @import 'config/radius';
29
- @import 'config/contexts'; // Context-aware theming system
30
29
 
31
30
  // Component Variables
32
31
  @import 'components/buttons';