@fundamental-styles/mcp 0.41.9-rc.2 → 0.41.9-rc.21

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 (27) hide show
  1. package/data/CHANGELOG.md +91 -3
  2. package/data/component-guidance.json +2 -2
  3. package/data/components/avatar-product-switch.md +175 -60
  4. package/data/components/container.md +113 -0
  5. package/data/components/form-group.md +1 -0
  6. package/data/components/navigation-navigation.md +673 -957
  7. package/data/components/navigation.md +5869 -2148
  8. package/data/components/shellbar.md +16 -16
  9. package/data/examples/BTP/Navigation/horizontal/navigation-horizontal-expander.example.html +4 -234
  10. package/data/examples/BTP/Navigation/horizontal/navigation-horizontal.example.html +196 -232
  11. package/data/examples/BTP/Navigation/vertical/navigation-legacy.example.html +353 -197
  12. package/data/examples/BTP/Navigation/vertical/navigation-popup.example.html +451 -245
  13. package/data/examples/BTP/Navigation/vertical/navigation-search.example.html +937 -0
  14. package/data/examples/BTP/Navigation/vertical/navigation-snapped.example.html +361 -157
  15. package/data/examples/BTP/Navigation/vertical/navigation-sticky-area.example.html +935 -0
  16. package/data/examples/BTP/Navigation/vertical/navigation-tags.example.html +948 -0
  17. package/data/examples/BTP/Navigation/vertical/navigation.example.html +444 -242
  18. package/data/examples/Components/Forms/form-group/group-header-in-form-grid-display-mode.example.html +106 -0
  19. package/data/examples/Components/product-switch/large.example.html +65 -19
  20. package/data/examples/Components/product-switch/medium.example.html +5 -7
  21. package/data/examples/Components/product-switch/small.example.html +4 -6
  22. package/data/examples/Components/product-switch/two-column.example.html +20 -0
  23. package/data/examples/Components/shellbar/optional-items.example.html +2 -2
  24. package/data/examples/Components/shellbar/overflow-toolbar.example.html +2 -2
  25. package/data/examples/Components/shellbar/responsive-paddings.example.html +4 -4
  26. package/data/examples/Components/shellbar/responsiveness.example.html +8 -8
  27. package/package.json +1 -1
package/data/examples/BTP/Navigation/vertical/navigation-legacy.example.html CHANGED
@@ -1,21 +1,16 @@
1
- <div
2
- class="fd-navigation fd-navigation--vertical"
3
- role="navigation"
4
- aria-roledescription="Side Navigation"
5
- style="width: 18rem; height: 60rem;">
6
-
1
+ <div
2
+ class="fd-navigation fd-navigation--vertical"
3
+ role="navigation"
4
+ aria-roledescription="Side Navigation"
5
+ style="width: 18rem; height: 60rem"
6
+ >
7
7
  <div class="fd-navigation__container fd-navigation__container--top">
8
- <ul
9
- class="fd-navigation__list"
10
- role="tree"
11
- aria-roledescription="Navigation List Tree"
12
- tabindex="-1"
13
- >
14
- <li class="fd-navigation__list-item fd-navigation__list-item--home" aria-hidden="true">
15
- <div
16
- class="fd-navigation__item"
17
- aria-level="1"
18
- role="treeitem"
8
+ <ul class="fd-navigation__list" role="tree" aria-roledescription="Navigation List Tree" tabindex="-1">
9
+ <li class="fd-navigation__list-item" aria-hidden="true">
10
+ <div
11
+ class="fd-navigation__item"
12
+ aria-level="1"
13
+ role="treeitem"
19
14
  title="Home"
20
15
  aria-roledescription="Navigation List Tree Item"
21
16
  aria-selected="false"
@@ -24,19 +19,27 @@
24
19
  <a class="fd-navigation__link" role="link" href="#">
25
20
  <span class="fd-navigation__icon sap-icon--home" role="presentation" aria-hidden="true"></span>
26
21
  <span class="fd-navigation__text">Home</span>
27
- <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
22
+ <span
23
+ class="fd-navigation__selection-indicator"
24
+ role="presentation"
25
+ aria-hidden="true"
26
+ aria-label="selection indicator"
27
+ ></span>
28
28
  </a>
29
29
  </div>
30
30
  </li>
31
31
 
32
- <li class="fd-navigation__list-item fd-navigation__list-item--separator" role="presentation" aria-hidden="true">
33
- </li>
32
+ <li
33
+ class="fd-navigation__list-item fd-navigation__list-item--separator"
34
+ role="presentation"
35
+ aria-hidden="true"
36
+ ></li>
34
37
 
35
38
  <li class="fd-navigation__list-item" aria-hidden="true">
36
- <div
37
- class="fd-navigation__item fd-navigation__item--group"
38
- aria-level="1"
39
- role="treeitem"
39
+ <div
40
+ class="fd-navigation__item fd-navigation__item--group"
41
+ aria-level="1"
42
+ role="treeitem"
40
43
  title="Main Items Group"
41
44
  aria-roledescription="Navigation List Tree Item - Group"
42
45
  aria-selected="false"
@@ -44,69 +47,98 @@
44
47
  >
45
48
  <a class="fd-navigation__link" role="button" tabindex="0" onclick="toggleNavigationSubmenu(event)">
46
49
  <span class="fd-navigation__text">Main Items</span>
47
- <span class="fd-navigation__has-children-indicator" role="presentation" aria-hidden="true" aria-label="has children indicator, expanded"></span>
50
+ <span
51
+ class="fd-navigation__has-children-indicator"
52
+ role="presentation"
53
+ aria-hidden="true"
54
+ aria-label="has children indicator, expanded"
55
+ ></span>
48
56
  </a>
49
57
  </div>
50
58
 
51
- <ul
52
- class="fd-navigation__list fd-navigation__list--parent-items"
53
- role="tree"
54
- aria-roledescription="Navigation List Tree - Parent Items"
59
+ <ul
60
+ class="fd-navigation__list fd-navigation__list--parent-items"
61
+ role="tree"
62
+ aria-roledescription="Navigation List Tree - Parent Items"
55
63
  tabindex="-1"
56
64
  >
57
65
  <li class="fd-navigation__list-item" aria-hidden="true">
58
- <div
59
- class="fd-navigation__item"
60
- aria-level="2"
61
- role="treeitem"
66
+ <div
67
+ class="fd-navigation__item"
68
+ aria-level="2"
69
+ role="treeitem"
62
70
  title="Basket"
63
71
  aria-roledescription="Navigation List Tree Item - Parent"
64
- aria-expanded="true"
72
+ aria-expanded="true"
65
73
  aria-selected="false"
66
74
  >
67
- <a class="fd-navigation__link" role="button" tabindex="-1" onclick="toggleNavigationSubmenu(event)">
68
- <span class="fd-navigation__icon sap-icon--unfavorite" role="presentation" aria-hidden="true"></span>
75
+ <a
76
+ class="fd-navigation__link"
77
+ role="button"
78
+ tabindex="-1"
79
+ onclick="toggleNavigationSubmenu(event)"
80
+ >
81
+ <span
82
+ class="fd-navigation__icon sap-icon--unfavorite"
83
+ role="presentation"
84
+ aria-hidden="true"
85
+ ></span>
69
86
  <span class="fd-navigation__text">Favorites</span>
70
- <span class="fd-navigation__has-children-indicator" role="presentation" aria-hidden="true" aria-label="has children indicator, expanded"></span>
87
+ <span
88
+ class="fd-navigation__has-children-indicator"
89
+ role="presentation"
90
+ aria-hidden="true"
91
+ aria-label="has children indicator, expanded"
92
+ ></span>
71
93
  </a>
72
94
  </div>
73
95
  <div class="fd-navigation__list-container" aria-hidden="true">
74
96
  <div class="fd-navigation__list-wrapper" aria-hidden="true">
75
- <ul
76
- class="fd-navigation__list fd-navigation__list--child-items"
77
- role="tree"
78
- aria-roledescription="Navigation List Tree - Child Items"
97
+ <ul
98
+ class="fd-navigation__list fd-navigation__list--child-items"
99
+ role="tree"
100
+ aria-roledescription="Navigation List Tree - Child Items"
79
101
  tabindex="-1"
80
102
  >
81
103
  <li class="fd-navigation__list-item" aria-hidden="true">
82
- <div
83
- class="fd-navigation__item fd-navigation__item--child"
84
- aria-level="3"
85
- role="treeitem"
104
+ <div
105
+ class="fd-navigation__item fd-navigation__item--child"
106
+ aria-level="3"
107
+ role="treeitem"
86
108
  title="My Accounts"
87
109
  aria-roledescription="Navigation List Tree Item - Child"
88
- aria-expanded="false"
110
+ aria-expanded="false"
89
111
  aria-selected="false"
90
112
  >
91
- <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
113
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
92
114
  <span class="fd-navigation__text">My Accounts</span>
93
- <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
115
+ <span
116
+ class="fd-navigation__selection-indicator"
117
+ role="presentation"
118
+ aria-hidden="true"
119
+ aria-label="selection indicator"
120
+ ></span>
94
121
  </a>
95
122
  </div>
96
123
  </li>
97
124
  <li class="fd-navigation__list-item" aria-hidden="true">
98
- <div
99
- class="fd-navigation__item fd-navigation__item--child"
100
- aria-level="3"
101
- role="treeitem"
125
+ <div
126
+ class="fd-navigation__item fd-navigation__item--child"
127
+ aria-level="3"
128
+ role="treeitem"
102
129
  title="My Orders"
103
130
  aria-roledescription="Navigation List Tree Item - Child"
104
- aria-expanded="false"
131
+ aria-expanded="false"
105
132
  aria-selected="false"
106
133
  >
107
- <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
134
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
108
135
  <span class="fd-navigation__text">My Orders</span>
109
- <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
136
+ <span
137
+ class="fd-navigation__selection-indicator"
138
+ role="presentation"
139
+ aria-hidden="true"
140
+ aria-label="selection indicator"
141
+ ></span>
110
142
  </a>
111
143
  </div>
112
144
  </li>
@@ -116,76 +148,109 @@
116
148
  </li>
117
149
 
118
150
  <li class="fd-navigation__list-item" aria-hidden="true">
119
- <div
120
- class="fd-navigation__item fd-navigation__item--with-expander"
121
- aria-level="2"
122
- role="treeitem"
151
+ <div
152
+ class="fd-navigation__item fd-navigation__item--with-expander"
153
+ aria-level="2"
154
+ role="treeitem"
123
155
  title="Customer Management"
124
156
  aria-roledescription="Navigation List Tree Item - Parent"
125
157
  aria-expanded="true"
126
158
  aria-selected="true"
127
159
  >
128
160
  <a class="fd-navigation__link" href="#">
129
- <span class="fd-navigation__icon sap-icon--account" role="presentation" aria-hidden="true"></span>
161
+ <span
162
+ class="fd-navigation__icon sap-icon--account"
163
+ role="presentation"
164
+ aria-hidden="true"
165
+ ></span>
130
166
  <span class="fd-navigation__text">Customer Management</span>
131
- <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
167
+ <span
168
+ class="fd-navigation__selection-indicator"
169
+ role="presentation"
170
+ aria-hidden="true"
171
+ aria-label="selection indicator"
172
+ ></span>
132
173
  </a>
133
- <span class="fd-navigation__has-children-indicator" role="button" aria-label="expand/collapse children"></span>
134
-
174
+ <span
175
+ class="fd-navigation__has-children-indicator"
176
+ role="button"
177
+ aria-label="expand/collapse children"
178
+ ></span>
135
179
  </div>
136
180
  <div class="fd-navigation__list-container" aria-hidden="true">
137
181
  <div class="fd-navigation__list-wrapper" aria-hidden="true">
138
- <ul
139
- class="fd-navigation__list fd-navigation__list--child-items"
140
- role="tree"
141
- aria-roledescription="Navigation List Tree - Child Items"
142
- tabindex="-1">
182
+ <ul
183
+ class="fd-navigation__list fd-navigation__list--child-items"
184
+ role="tree"
185
+ aria-roledescription="Navigation List Tree - Child Items"
186
+ tabindex="-1"
187
+ >
143
188
  <li class="fd-navigation__list-item" aria-hidden="true">
144
- <div
145
- class="fd-navigation__item fd-navigation__item--child"
146
- aria-level="3"
147
- role="treeitem"
189
+ <div
190
+ class="fd-navigation__item fd-navigation__item--child"
191
+ aria-level="3"
192
+ role="treeitem"
148
193
  title="Contacts"
149
194
  aria-roledescription="Navigation List Tree Item - Child"
150
- aria-expanded="false"
195
+ aria-expanded="false"
151
196
  aria-selected="false"
152
197
  >
153
- <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
198
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
154
199
  <span class="fd-navigation__text">Contacts</span>
155
- <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
200
+ <span
201
+ class="fd-navigation__selection-indicator"
202
+ role="presentation"
203
+ aria-hidden="true"
204
+ aria-label="selection indicator"
205
+ ></span>
156
206
  </a>
157
207
  </div>
158
208
  </li>
159
209
  <li class="fd-navigation__list-item" aria-hidden="true">
160
- <div
161
- class="fd-navigation__item fd-navigation__item--child"
162
- aria-level="3"
163
- role="treeitem"
210
+ <div
211
+ class="fd-navigation__item fd-navigation__item--child"
212
+ aria-level="3"
213
+ role="treeitem"
164
214
  title="Companies"
165
215
  aria-roledescription="Navigation List Tree Item - Child"
166
- aria-expanded="false"
216
+ aria-expanded="false"
167
217
  aria-selected="true"
168
218
  >
169
- <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
219
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
170
220
  <span class="fd-navigation__text">Companies (selected)</span>
171
- <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
221
+ <span
222
+ class="fd-navigation__selection-indicator"
223
+ role="presentation"
224
+ aria-hidden="true"
225
+ aria-label="selection indicator"
226
+ ></span>
172
227
  </a>
173
228
  </div>
174
229
  </li>
175
230
  <li class="fd-navigation__list-item" aria-hidden="true">
176
- <div
177
- class="fd-navigation__item fd-navigation__item--child"
178
- aria-level="3"
179
- role="treeitem"
231
+ <div
232
+ class="fd-navigation__item fd-navigation__item--child"
233
+ aria-level="3"
234
+ role="treeitem"
180
235
  title="Partners"
181
236
  aria-roledescription="Navigation List Tree Item - Child"
182
- aria-expanded="false"
237
+ aria-expanded="false"
183
238
  aria-selected="false"
184
239
  >
185
- <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
240
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
186
241
  <span class="fd-navigation__text">Partners (external link)</span>
187
- <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
188
- <span class="fd-navigation__external-link-indicator" role="presentation" aria-hidden="true" aria-label="external link indicator"></span>
242
+ <span
243
+ class="fd-navigation__selection-indicator"
244
+ role="presentation"
245
+ aria-hidden="true"
246
+ aria-label="selection indicator"
247
+ ></span>
248
+ <span
249
+ class="fd-navigation__external-link-indicator"
250
+ role="presentation"
251
+ aria-hidden="true"
252
+ aria-label="external link indicator"
253
+ ></span>
189
254
  </a>
190
255
  </div>
191
256
  </li>
@@ -196,14 +261,17 @@
196
261
  </ul>
197
262
  </li>
198
263
 
199
- <li class="fd-navigation__list-item fd-navigation__list-item--separator" role="presentation" aria-hidden="true">
200
- </li>
264
+ <li
265
+ class="fd-navigation__list-item fd-navigation__list-item--separator"
266
+ role="presentation"
267
+ aria-hidden="true"
268
+ ></li>
201
269
 
202
270
  <li class="fd-navigation__list-item" aria-hidden="true">
203
- <div
204
- class="fd-navigation__item fd-navigation__item--group"
205
- aria-level="1"
206
- role="treeitem"
271
+ <div
272
+ class="fd-navigation__item fd-navigation__item--group"
273
+ aria-level="1"
274
+ role="treeitem"
207
275
  title="Additional Items"
208
276
  aria-roledescription="Navigation List Tree Item - Group"
209
277
  aria-selected="false"
@@ -211,104 +279,152 @@
211
279
  >
212
280
  <a class="fd-navigation__link" role="button" tabindex="-1" onclick="toggleNavigationSubmenu(event)">
213
281
  <span class="fd-navigation__text">Additional Items</span>
214
- <span class="fd-navigation__has-children-indicator" role="presentation" aria-hidden="true" aria-label="has children indicator, expanded"></span>
282
+ <span
283
+ class="fd-navigation__has-children-indicator"
284
+ role="presentation"
285
+ aria-hidden="true"
286
+ aria-label="has children indicator, expanded"
287
+ ></span>
215
288
  </a>
216
289
  </div>
217
290
 
218
- <ul
219
- class="fd-navigation__list fd-navigation__list--parent-items"
220
- role="tree"
221
- aria-roledescription="Navigation List Tree - Parent Items"
291
+ <ul
292
+ class="fd-navigation__list fd-navigation__list--parent-items"
293
+ role="tree"
294
+ aria-roledescription="Navigation List Tree - Parent Items"
222
295
  tabindex="-1"
223
296
  >
224
297
  <li class="fd-navigation__list-item" aria-hidden="true">
225
- <div
226
- class="fd-navigation__item"
227
- aria-level="2"
298
+ <div
299
+ class="fd-navigation__item"
300
+ aria-level="2"
228
301
  role="treeitem"
229
302
  title="Products"
230
303
  aria-roledescription="Navigation List Tree Item - Parent"
231
304
  aria-selected="false"
232
305
  aria-expanded="false"
233
306
  >
234
- <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
235
- <span class="fd-navigation__icon sap-icon--customer-view" role="presentation" aria-hidden="true"></span>
307
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
308
+ <span
309
+ class="fd-navigation__icon sap-icon--customer-view"
310
+ role="presentation"
311
+ aria-hidden="true"
312
+ ></span>
236
313
  <span class="fd-navigation__text">Products</span>
237
- <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
314
+ <span
315
+ class="fd-navigation__selection-indicator"
316
+ role="presentation"
317
+ aria-hidden="true"
318
+ aria-label="selection indicator"
319
+ ></span>
238
320
  </a>
239
321
  </div>
240
322
  </li>
241
323
 
242
324
  <li class="fd-navigation__list-item" aria-hidden="true">
243
- <div
244
- class="fd-navigation__item"
245
- aria-level="2"
246
- role="treeitem"
325
+ <div
326
+ class="fd-navigation__item"
327
+ aria-level="2"
328
+ role="treeitem"
247
329
  title="Marketing"
248
330
  aria-roledescription="Navigation List Tree Item - Parent"
249
- aria-expanded="true"
331
+ aria-expanded="true"
250
332
  aria-selected="false"
251
333
  >
252
- <a class="fd-navigation__link" role="button" tabindex="-1" onclick="toggleNavigationSubmenu(event)">
253
- <span class="fd-navigation__icon sap-icon--marketing-campaign" role="presentation" aria-hidden="true"></span>
334
+ <a
335
+ class="fd-navigation__link"
336
+ role="button"
337
+ tabindex="-1"
338
+ onclick="toggleNavigationSubmenu(event)"
339
+ >
340
+ <span
341
+ class="fd-navigation__icon sap-icon--marketing-campaign"
342
+ role="presentation"
343
+ aria-hidden="true"
344
+ ></span>
254
345
  <span class="fd-navigation__text">Marketing</span>
255
- <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
256
- <span class="fd-navigation__has-children-indicator" role="presentation" aria-hidden="true" aria-label="has children indicator, expanded"></span>
346
+ <span
347
+ class="fd-navigation__selection-indicator"
348
+ role="presentation"
349
+ aria-hidden="true"
350
+ aria-label="selection indicator"
351
+ ></span>
352
+ <span
353
+ class="fd-navigation__has-children-indicator"
354
+ role="presentation"
355
+ aria-hidden="true"
356
+ aria-label="has children indicator, expanded"
357
+ ></span>
257
358
  </a>
258
359
  </div>
259
360
  <div class="fd-navigation__list-container" aria-hidden="true">
260
361
  <div class="fd-navigation__list-wrapper" aria-hidden="true">
261
- <ul
262
- class="fd-navigation__list fd-navigation__list--child-items"
263
- role="tree"
264
- aria-roledescription="Navigation List Tree - Child Items"
362
+ <ul
363
+ class="fd-navigation__list fd-navigation__list--child-items"
364
+ role="tree"
365
+ aria-roledescription="Navigation List Tree - Child Items"
265
366
  tabindex="-1"
266
367
  >
267
368
  <li class="fd-navigation__list-item" aria-hidden="true">
268
- <div
269
- class="fd-navigation__item fd-navigation__item--child"
270
- aria-level="3"
271
- role="treeitem"
369
+ <div
370
+ class="fd-navigation__item fd-navigation__item--child"
371
+ aria-level="3"
372
+ role="treeitem"
272
373
  title="Campaigns"
273
374
  aria-roledescription="Navigation List Tree Item - Child"
274
- aria-expanded="false"
375
+ aria-expanded="false"
275
376
  aria-selected="false"
276
377
  >
277
- <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
378
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
278
379
  <span class="fd-navigation__text">Campaigns</span>
279
- <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
380
+ <span
381
+ class="fd-navigation__selection-indicator"
382
+ role="presentation"
383
+ aria-hidden="true"
384
+ aria-label="selection indicator"
385
+ ></span>
280
386
  </a>
281
387
  </div>
282
388
  </li>
283
389
  <li class="fd-navigation__list-item" aria-hidden="true">
284
- <div
285
- class="fd-navigation__item fd-navigation__item--child"
286
- aria-level="3"
287
- role="treeitem"
390
+ <div
391
+ class="fd-navigation__item fd-navigation__item--child"
392
+ aria-level="3"
393
+ role="treeitem"
288
394
  title="E-Mail Marketing"
289
395
  aria-roledescription="Navigation List Tree Item - Child"
290
- aria-expanded="false"
396
+ aria-expanded="false"
291
397
  aria-selected="false"
292
398
  >
293
- <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
399
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
294
400
  <span class="fd-navigation__text">E-Mail Marketing</span>
295
- <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
401
+ <span
402
+ class="fd-navigation__selection-indicator"
403
+ role="presentation"
404
+ aria-hidden="true"
405
+ aria-label="selection indicator"
406
+ ></span>
296
407
  </a>
297
408
  </div>
298
409
  </li>
299
410
  <li class="fd-navigation__list-item" aria-hidden="true">
300
- <div
301
- class="fd-navigation__item fd-navigation__item--child"
302
- aria-level="3"
303
- role="treeitem"
411
+ <div
412
+ class="fd-navigation__item fd-navigation__item--child"
413
+ aria-level="3"
414
+ role="treeitem"
304
415
  title="Marketing Automation"
305
416
  aria-roledescription="Navigation List Tree Item - Child"
306
- aria-expanded="false"
417
+ aria-expanded="false"
307
418
  aria-selected="false"
308
419
  >
309
- <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
420
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
310
421
  <span class="fd-navigation__text">Marketing Automation</span>
311
- <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
422
+ <span
423
+ class="fd-navigation__selection-indicator"
424
+ role="presentation"
425
+ aria-hidden="true"
426
+ aria-label="selection indicator"
427
+ ></span>
312
428
  </a>
313
429
  </div>
314
430
  </li>
@@ -318,75 +434,109 @@
318
434
  </li>
319
435
 
320
436
  <li class="fd-navigation__list-item" aria-hidden="true">
321
- <div
322
- class="fd-navigation__item"
323
- aria-level="2"
324
- role="treeitem"
437
+ <div
438
+ class="fd-navigation__item"
439
+ aria-level="2"
440
+ role="treeitem"
325
441
  title="Reports"
326
442
  aria-roledescription="Navigation List Tree Item - Parent"
327
- aria-expanded="true"
443
+ aria-expanded="true"
328
444
  aria-selected="false"
329
445
  >
330
- <a class="fd-navigation__link" role="button" tabindex="-1" onclick="toggleNavigationSubmenu(event)">
331
- <span class="fd-navigation__icon sap-icon--manager-insight" role="presentation" aria-hidden="true"></span>
446
+ <a
447
+ class="fd-navigation__link"
448
+ role="button"
449
+ tabindex="-1"
450
+ onclick="toggleNavigationSubmenu(event)"
451
+ >
452
+ <span
453
+ class="fd-navigation__icon sap-icon--manager-insight"
454
+ role="presentation"
455
+ aria-hidden="true"
456
+ ></span>
332
457
  <span class="fd-navigation__text">Reports</span>
333
- <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
334
- <span class="fd-navigation__has-children-indicator" role="presentation" aria-hidden="true" aria-label="has children indicator, expanded"></span>
458
+ <span
459
+ class="fd-navigation__selection-indicator"
460
+ role="presentation"
461
+ aria-hidden="true"
462
+ aria-label="selection indicator"
463
+ ></span>
464
+ <span
465
+ class="fd-navigation__has-children-indicator"
466
+ role="presentation"
467
+ aria-hidden="true"
468
+ aria-label="has children indicator, expanded"
469
+ ></span>
335
470
  </a>
336
471
  </div>
337
472
  <div class="fd-navigation__list-container" aria-hidden="true">
338
473
  <div class="fd-navigation__list-wrapper" aria-hidden="true">
339
- <ul
340
- class="fd-navigation__list fd-navigation__list--child-items"
341
- role="tree"
342
- aria-roledescription="Navigation List Tree - Child Items"
474
+ <ul
475
+ class="fd-navigation__list fd-navigation__list--child-items"
476
+ role="tree"
477
+ aria-roledescription="Navigation List Tree - Child Items"
343
478
  tabindex="-1"
344
479
  >
345
480
  <li class="fd-navigation__list-item" aria-hidden="true">
346
- <div
347
- class="fd-navigation__item fd-navigation__item--child"
348
- aria-level="3"
349
- role="treeitem"
481
+ <div
482
+ class="fd-navigation__item fd-navigation__item--child"
483
+ aria-level="3"
484
+ role="treeitem"
350
485
  title="Sales Report"
351
486
  aria-roledescription="Navigation List Tree Item - Child"
352
- aria-expanded="false"
487
+ aria-expanded="false"
353
488
  aria-selected="false"
354
489
  >
355
- <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
490
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
356
491
  <span class="fd-navigation__text">Sales Report</span>
357
- <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
492
+ <span
493
+ class="fd-navigation__selection-indicator"
494
+ role="presentation"
495
+ aria-hidden="true"
496
+ aria-label="selection indicator"
497
+ ></span>
358
498
  </a>
359
499
  </div>
360
500
  </li>
361
501
  <li class="fd-navigation__list-item" aria-hidden="true">
362
- <div
363
- class="fd-navigation__item fd-navigation__item--child"
364
- aria-level="3"
365
- role="treeitem"
502
+ <div
503
+ class="fd-navigation__item fd-navigation__item--child"
504
+ aria-level="3"
505
+ role="treeitem"
366
506
  title="Customer Reports"
367
507
  aria-roledescription="Navigation List Tree Item - Child"
368
- aria-expanded="false"
508
+ aria-expanded="false"
369
509
  aria-selected="false"
370
510
  >
371
- <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
511
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
372
512
  <span class="fd-navigation__text">Customer Reports</span>
373
- <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
513
+ <span
514
+ class="fd-navigation__selection-indicator"
515
+ role="presentation"
516
+ aria-hidden="true"
517
+ aria-label="selection indicator"
518
+ ></span>
374
519
  </a>
375
520
  </div>
376
521
  </li>
377
522
  <li class="fd-navigation__list-item" aria-hidden="true">
378
- <div
379
- class="fd-navigation__item fd-navigation__item--child"
380
- aria-level="3"
381
- role="treeitem"
523
+ <div
524
+ class="fd-navigation__item fd-navigation__item--child"
525
+ aria-level="3"
526
+ role="treeitem"
382
527
  title="Marketing Reports"
383
528
  aria-roledescription="Navigation List Tree Item - Child"
384
- aria-expanded="false"
529
+ aria-expanded="false"
385
530
  aria-selected="false"
386
531
  >
387
- <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
532
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
388
533
  <span class="fd-navigation__text">Marketing Reports</span>
389
- <span class="fd-navigation__selection-indicator" role="presentation" aria-hidden="true" aria-label="selection indicator"></span>
534
+ <span
535
+ class="fd-navigation__selection-indicator"
536
+ role="presentation"
537
+ aria-hidden="true"
538
+ aria-label="selection indicator"
539
+ ></span>
390
540
  </a>
391
541
  </div>
392
542
  </li>
@@ -397,48 +547,54 @@
397
547
  </ul>
398
548
  </li>
399
549
 
400
- <li class="fd-navigation__list-item fd-navigation__list-item--spacer" role="presentation" aria-hidden="true">
401
- </li>
550
+ <li
551
+ class="fd-navigation__list-item fd-navigation__list-item--spacer"
552
+ role="presentation"
553
+ aria-hidden="true"
554
+ ></li>
402
555
  </ul>
403
556
  </div>
404
557
 
405
558
  <div class="fd-navigation__container fd-navigation__container--bottom">
406
- <ul
407
- class="fd-navigation__list"
408
- role="tree"
409
- aria-roledescription="Navigation List Tree"
410
- tabindex="-1">
411
-
559
+ <ul class="fd-navigation__list" role="tree" aria-roledescription="Navigation List Tree" tabindex="-1">
412
560
  <li class="fd-navigation__list-item" aria-hidden="true">
413
- <div
414
- class="fd-navigation__item fd-navigation__item--create"
415
- aria-level="1"
416
- role="treeitem"
417
- title="Quick Create"
561
+ <div
562
+ class="fd-navigation__item fd-navigation__item--create"
563
+ aria-level="1"
564
+ role="treeitem"
565
+ title="Create Ticket"
418
566
  aria-roledescription="Navigation List Tree Item"
419
567
  aria-selected="false"
420
568
  aria-expanded="false"
421
569
  >
422
570
  <button class="fd-navigation__link">
423
- <span class="fd-navigation__icon sap-icon--add" role="presentation" aria-hidden="true"></span>
424
- <span class="fd-navigation__text">Quick Create</span>
571
+ <span
572
+ class="fd-navigation__icon sap-icon--write-new"
573
+ role="presentation"
574
+ aria-hidden="true"
575
+ ></span>
576
+ <span class="fd-navigation__text">Create Ticket</span>
425
577
  <span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
426
578
  </button>
427
579
  </div>
428
580
  </li>
429
-
581
+
430
582
  <li class="fd-navigation__list-item" aria-hidden="true">
431
- <div
432
- class="fd-navigation__item"
433
- aria-level="1"
434
- role="treeitem"
583
+ <div
584
+ class="fd-navigation__item"
585
+ aria-level="1"
586
+ role="treeitem"
435
587
  title="Product Settings"
436
588
  aria-roledescription="Navigation List Tree Item"
437
589
  aria-selected="false"
438
590
  aria-expanded="false"
439
591
  >
440
- <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
441
- <span class="fd-navigation__icon sap-icon--settings" role="presentation" aria-hidden="true"></span>
592
+ <a class="fd-navigation__link" role="link" tabindex="-1" href="#">
593
+ <span
594
+ class="fd-navigation__icon sap-icon--settings"
595
+ role="presentation"
596
+ aria-hidden="true"
597
+ ></span>
442
598
  <span class="fd-navigation__text">Product Settings</span>
443
599
  <span class="fd-navigation__selection-indicator" aria-label="selection indicator"></span>
444
600
  </a>