@fundamental-styles/mcp 0.41.9-rc.8 → 0.41.9
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/data/CHANGELOG.md +72 -0
- package/data/components/avatar-product-switch.md +167 -52
- package/data/components/container.md +113 -0
- package/data/components/dialog-docs-static-settings.md +1490 -130
- package/data/components/form-group.md +1 -0
- package/data/components/navigation-navigation.md +673 -957
- package/data/components/navigation.md +5869 -2148
- package/data/examples/BTP/Navigation/horizontal/navigation-horizontal-expander.example.html +4 -234
- package/data/examples/BTP/Navigation/horizontal/navigation-horizontal.example.html +196 -232
- package/data/examples/BTP/Navigation/vertical/navigation-legacy.example.html +353 -197
- package/data/examples/BTP/Navigation/vertical/navigation-popup.example.html +451 -245
- package/data/examples/BTP/Navigation/vertical/navigation-search.example.html +937 -0
- package/data/examples/BTP/Navigation/vertical/navigation-snapped.example.html +361 -157
- package/data/examples/BTP/Navigation/vertical/navigation-sticky-area.example.html +935 -0
- package/data/examples/BTP/Navigation/vertical/navigation-tags.example.html +948 -0
- package/data/examples/BTP/Navigation/vertical/navigation.example.html +444 -242
- package/data/examples/Components/Forms/form-group/group-header-in-form-grid-display-mode.example.html +106 -0
- package/data/examples/Components/product-switch/large.example.html +65 -19
- package/data/examples/Components/product-switch/medium.example.html +5 -7
- package/data/examples/Components/product-switch/small.example.html +4 -6
- package/data/examples/Components/product-switch/two-column.example.html +20 -0
- package/data/examples/Components/settings/md.example.html +124 -30
- package/data/examples/Components/settings/sm.example.html +64 -27
- package/data/examples/Components/settings/xl-appearance.example.html +370 -0
- package/data/examples/Components/settings/xl-language-region.example.html +284 -0
- package/data/examples/Components/settings/xl-notifications-details.example.html +240 -0
- package/data/examples/Components/settings/xl-notifications.example.html +370 -0
- package/data/examples/Components/settings/xl-user-account.example.html +114 -0
- package/data/examples/Components/settings/xl.example.html +113 -25
- package/package.json +1 -1
- package/data/examples/Components/settings/xl-default.example.html +0 -108
|
@@ -212,6 +212,119 @@ When group headers are displayed in a **Form Grid**, paddings are added to the g
|
|
|
212
212
|
</form>
|
|
213
213
|
```
|
|
214
214
|
|
|
215
|
+
### Group header (form grid) – display mode
|
|
216
|
+
|
|
217
|
+
Display mode variant of the group header form grid. Add \
|
|
218
|
+
|
|
219
|
+
```html
|
|
220
|
+
<div class="fd-container fd-form-layout-grid-container fd-form-layout-grid-container--display-mode">
|
|
221
|
+
<div class="fd-row">
|
|
222
|
+
<!-- Group 1 -->
|
|
223
|
+
<div class="fd-form-group fd-form-group--with-spacing fd-col fd-col-md--6 fd-col-lg--6 fd-col-xl--6 fd-col--wrap" role="group" aria-labelledby="dm-grid1GroupHeader">
|
|
224
|
+
<div class="fd-form-group__header" id="dm-grid1GroupHeader">
|
|
225
|
+
<h4 class="fd-form-group__header-text">Personal Information</h4>
|
|
226
|
+
</div>
|
|
227
|
+
|
|
228
|
+
<div class="fd-form-item fd-row">
|
|
229
|
+
<div class="fd-col fd-col-md--2 fd-col-lg--4 fd-col-xl--12">
|
|
230
|
+
<label class="fd-form-label fd-form-label--colon" for="dm-input-14-name">Full Name</label>
|
|
231
|
+
</div>
|
|
232
|
+
<div class="fd-col fd-col-md--10 fd-col-lg--8 fd-col-xl--12">
|
|
233
|
+
<p class="fd-text" id="dm-input-14-name">Amelia Perry</p>
|
|
234
|
+
</div>
|
|
235
|
+
</div>
|
|
236
|
+
|
|
237
|
+
<div class="fd-form-item fd-row">
|
|
238
|
+
<div class="fd-col fd-col-md--2 fd-col-lg--4 fd-col-xl--12">
|
|
239
|
+
<label class="fd-form-label fd-form-label--colon" for="dm-input-14x-name">City of Residence</label>
|
|
240
|
+
</div>
|
|
241
|
+
<div class="fd-col fd-col-md--10 fd-col-lg--8 fd-col-xl--12">
|
|
242
|
+
<p class="fd-text" id="dm-input-14x-name">New York</p>
|
|
243
|
+
</div>
|
|
244
|
+
</div>
|
|
245
|
+
|
|
246
|
+
<div class="fd-form-item fd-row">
|
|
247
|
+
<div class="fd-col fd-col-md--2 fd-col-lg--4 fd-col-xl--12">
|
|
248
|
+
<label class="fd-form-label fd-form-label--colon" for="dm-input-14y-name">Job Title</label>
|
|
249
|
+
</div>
|
|
250
|
+
<div class="fd-col fd-col-md--10 fd-col-lg--8 fd-col-xl--12">
|
|
251
|
+
<p class="fd-text" id="dm-input-14y-name">Product Designer</p>
|
|
252
|
+
</div>
|
|
253
|
+
</div>
|
|
254
|
+
</div>
|
|
255
|
+
|
|
256
|
+
<!-- Group 2 -->
|
|
257
|
+
<div class="fd-form-group fd-form-group--with-spacing fd-col fd-col-md--6 fd-col-lg--6 fd-col-xl--6 fd-col--wrap" role="group" aria-labelledby="dm-grid2GroupHeader">
|
|
258
|
+
<div class="fd-form-group__header">
|
|
259
|
+
<h4 class="fd-form-group__header-text" id="dm-grid2GroupHeader">Contact Details</h4>
|
|
260
|
+
</div>
|
|
261
|
+
|
|
262
|
+
<div class="fd-form-item fd-row">
|
|
263
|
+
<div class="fd-col fd-col-md--2 fd-col-lg--4 fd-col-xl--12">
|
|
264
|
+
<label class="fd-form-label fd-form-label--colon" for="dm-input-14a-name">Email Address</label>
|
|
265
|
+
</div>
|
|
266
|
+
<div class="fd-col fd-col-md--10 fd-col-lg--8 fd-col-xl--12">
|
|
267
|
+
<p class="fd-text" id="dm-input-14a-name">amelia.perry@example.com</p>
|
|
268
|
+
</div>
|
|
269
|
+
</div>
|
|
270
|
+
|
|
271
|
+
<div class="fd-form-item fd-row">
|
|
272
|
+
<div class="fd-col fd-col-md--2 fd-col-lg--4 fd-col-xl--12">
|
|
273
|
+
<label class="fd-form-label fd-form-label--colon" for="dm-input-14b-name">Phone Number</label>
|
|
274
|
+
</div>
|
|
275
|
+
<div class="fd-col fd-col-md--10 fd-col-lg--8 fd-col-xl--12">
|
|
276
|
+
<p class="fd-text" id="dm-input-14b-name">+1 555 123 4567</p>
|
|
277
|
+
</div>
|
|
278
|
+
</div>
|
|
279
|
+
|
|
280
|
+
<div class="fd-form-item fd-row">
|
|
281
|
+
<div class="fd-col fd-col-md--2 fd-col-lg--4 fd-col-xl--12">
|
|
282
|
+
<label class="fd-form-label fd-form-label--colon" for="dm-input-14c-name">LinkedIn Profile</label>
|
|
283
|
+
</div>
|
|
284
|
+
<div class="fd-col fd-col-md--10 fd-col-lg--8 fd-col-xl--12">
|
|
285
|
+
<p class="fd-text" id="dm-input-14c-name">linkedin.com/in/amelia-perry</p>
|
|
286
|
+
</div>
|
|
287
|
+
</div>
|
|
288
|
+
</div>
|
|
289
|
+
|
|
290
|
+
<!-- Group 3 -->
|
|
291
|
+
<div class="fd-form-group fd-form-group--with-spacing fd-col fd-col-md--6 fd-col-lg--6 fd-col-xl--6 fd-col--wrap" role="group" aria-labelledby="dm-grid3GroupHeader">
|
|
292
|
+
<div class="fd-form-group__header">
|
|
293
|
+
<h4 class="fd-form-group__header-text" id="dm-grid3GroupHeader">Security Questions</h4>
|
|
294
|
+
</div>
|
|
295
|
+
|
|
296
|
+
<div class="fd-form-item fd-row">
|
|
297
|
+
<div class="fd-col fd-col-md--2 fd-col-lg--4 fd-col-xl--12">
|
|
298
|
+
<label class="fd-form-label fd-form-label--colon" for="dm-input-14j-name">What was your childhood nickname?</label>
|
|
299
|
+
</div>
|
|
300
|
+
<div class="fd-col fd-col-md--10 fd-col-lg--8 fd-col-xl--12">
|
|
301
|
+
<p class="fd-text" id="dm-input-14j-name">Mimi</p>
|
|
302
|
+
</div>
|
|
303
|
+
</div>
|
|
304
|
+
|
|
305
|
+
<div class="fd-form-item fd-row">
|
|
306
|
+
<div class="fd-col fd-col-md--2 fd-col-lg--4 fd-col-xl--12">
|
|
307
|
+
<label class="fd-form-label fd-form-label--colon" for="dm-input-14h-name">What was the name of your first pet?</label>
|
|
308
|
+
</div>
|
|
309
|
+
<div class="fd-col fd-col-md--10 fd-col-lg--8 fd-col-xl--12">
|
|
310
|
+
<p class="fd-text" id="dm-input-14h-name">Charlie</p>
|
|
311
|
+
</div>
|
|
312
|
+
</div>
|
|
313
|
+
|
|
314
|
+
<div class="fd-form-item fd-row">
|
|
315
|
+
<div class="fd-col fd-col-md--2 fd-col-lg--4 fd-col-xl--12">
|
|
316
|
+
<label class="fd-form-label fd-form-label--colon" for="dm-input-14k-name">What city were you born in?</label>
|
|
317
|
+
</div>
|
|
318
|
+
<div class="fd-col fd-col-md--10 fd-col-lg--8 fd-col-xl--12">
|
|
319
|
+
<p class="fd-text" id="dm-input-14k-name">Boston</p>
|
|
320
|
+
</div>
|
|
321
|
+
</div>
|
|
322
|
+
</div>
|
|
323
|
+
|
|
324
|
+
</div>
|
|
325
|
+
</div>
|
|
326
|
+
```
|
|
327
|
+
|
|
215
328
|
## Accessibility
|
|
216
329
|
|
|
217
330
|
- Use semantic HTML elements where appropriate
|