@patternfly/patternfly 4.179.2 → 4.180.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.
Files changed (45) hide show
  1. package/components/Dropdown/dropdown.css +4 -2
  2. package/components/Dropdown/dropdown.scss +4 -2
  3. package/components/FormControl/form-control.scss +3 -0
  4. package/components/MenuToggle/menu-toggle.css +10 -7
  5. package/components/MenuToggle/menu-toggle.scss +11 -9
  6. package/components/SearchInput/search-input.css +1 -0
  7. package/components/SearchInput/search-input.scss +1 -0
  8. package/components/Select/select.css +3 -2
  9. package/components/Select/select.scss +4 -2
  10. package/docs/components/AppLauncher/examples/application-launcher.md +15 -8
  11. package/docs/components/ContextSelector/examples/context-selector.md +84 -102
  12. package/docs/components/DualListSelector/examples/DualListSelector.md +240 -112
  13. package/docs/components/FormControl/examples/FormControl.md +0 -11
  14. package/docs/components/InputGroup/examples/InputGroup.md +6 -22
  15. package/docs/components/LogViewer/examples/LogViewer.md +567 -198
  16. package/docs/components/Menu/examples/Menu.md +1908 -983
  17. package/docs/components/MenuToggle/examples/MenuToggle.md +77 -44
  18. package/docs/components/Nav/examples/Navigation.md +563 -231
  19. package/docs/components/Page/examples/Page.md +11 -2
  20. package/docs/components/Select/examples/Select.md +30 -14
  21. package/docs/components/Table/examples/Table.md +8 -0
  22. package/docs/components/Toolbar/examples/Toolbar.md +300 -180
  23. package/docs/components/TreeView/examples/TreeView.md +15 -7
  24. package/docs/components/Wizard/examples/Wizard.md +6 -6
  25. package/docs/demos/Alert/examples/Alert.md +20 -40
  26. package/docs/demos/BackToTop/examples/BackToTop.md +149 -249
  27. package/docs/demos/ContextSelector/examples/ContextSelector.md +595 -378
  28. package/docs/demos/DataList/examples/DataList.md +159 -114
  29. package/docs/demos/Drawer/examples/Drawer.md +60 -120
  30. package/docs/demos/JumpLinks/examples/JumpLinks.md +80 -31
  31. package/docs/demos/Masthead/examples/Masthead.md +622 -517
  32. package/docs/demos/Nav/examples/Nav.md +203 -343
  33. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +100 -200
  34. package/docs/demos/Page/examples/Page.md +1522 -1475
  35. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +3 -3
  36. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +207 -126
  37. package/docs/demos/Table/examples/Table.md +2459 -1090
  38. package/docs/demos/Tabs/examples/Tabs.md +11 -19
  39. package/docs/demos/Toolbar/examples/Toolbar.md +55 -55
  40. package/docs/demos/Wizard/examples/Wizard.md +6 -2
  41. package/package.json +1 -1
  42. package/patternfly-no-reset.css +18 -11
  43. package/patternfly.css +18 -11
  44. package/patternfly.min.css +1 -1
  45. package/patternfly.min.css.map +1 -1
package/docs/demos/DataList/examples/DataList.md CHANGED
@@ -397,23 +397,20 @@ wrapperTag: div
397
397
  </button>
398
398
  <div class="pf-c-context-selector__menu" hidden>
399
399
  <div class="pf-c-context-selector__menu-search">
400
- <div class="pf-c-input-group">
401
- <input
402
- class="pf-c-form-control"
403
- type="search"
404
- placeholder="Search"
405
- id="textInput1"
406
- name="textInput1"
407
- aria-labelledby="-context-selector-search-button"
408
- />
409
- <button
410
- class="pf-c-button pf-m-control"
411
- type="button"
412
- id="-context-selector-search-button"
413
- aria-label="Search menu items"
414
- >
415
- <i class="fas fa-search" aria-hidden="true"></i>
416
- </button>
400
+ <div class="pf-c-search-input">
401
+ <div class="pf-c-search-input__bar">
402
+ <span class="pf-c-search-input__text">
403
+ <span class="pf-c-search-input__icon">
404
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
405
+ </span>
406
+ <input
407
+ class="pf-c-search-input__text-input"
408
+ type="text"
409
+ placeholder="Search"
410
+ aria-label="Search"
411
+ />
412
+ </span>
413
+ </div>
417
414
  </div>
418
415
  </div>
419
416
  <ul class="pf-c-context-selector__menu-list">
@@ -1388,23 +1385,23 @@ wrapperTag: div
1388
1385
  </button>
1389
1386
  <div class="pf-c-context-selector__menu" hidden>
1390
1387
  <div class="pf-c-context-selector__menu-search">
1391
- <div class="pf-c-input-group">
1392
- <input
1393
- class="pf-c-form-control"
1394
- type="search"
1395
- placeholder="Search"
1396
- id="textInput1"
1397
- name="textInput1"
1398
- aria-labelledby="-context-selector-search-button"
1399
- />
1400
- <button
1401
- class="pf-c-button pf-m-control"
1402
- type="button"
1403
- id="-context-selector-search-button"
1404
- aria-label="Search menu items"
1405
- >
1406
- <i class="fas fa-search" aria-hidden="true"></i>
1407
- </button>
1388
+ <div class="pf-c-search-input">
1389
+ <div class="pf-c-search-input__bar">
1390
+ <span class="pf-c-search-input__text">
1391
+ <span class="pf-c-search-input__icon">
1392
+ <i
1393
+ class="fas fa-search fa-fw"
1394
+ aria-hidden="true"
1395
+ ></i>
1396
+ </span>
1397
+ <input
1398
+ class="pf-c-search-input__text-input"
1399
+ type="text"
1400
+ placeholder="Search"
1401
+ aria-label="Search"
1402
+ />
1403
+ </span>
1404
+ </div>
1408
1405
  </div>
1409
1406
  </div>
1410
1407
  <ul class="pf-c-context-selector__menu-list">
@@ -2326,64 +2323,88 @@ wrapperTag: div
2326
2323
  aria-label="search filter"
2327
2324
  role="group"
2328
2325
  >
2329
- <div class="pf-c-dropdown">
2326
+ <div class="pf-c-select" style="width: 175px">
2327
+ <span id="-select-name-label" hidden>Choose one</span>
2328
+
2330
2329
  <button
2331
- class="pf-c-dropdown__toggle"
2332
- id="--button"
2333
- aria-expanded="false"
2330
+ class="pf-c-select__toggle"
2334
2331
  type="button"
2332
+ id="-select-name-toggle"
2333
+ aria-haspopup="true"
2334
+ aria-expanded="false"
2335
+ aria-labelledby="-select-name-label -select-name-toggle"
2335
2336
  >
2336
- <span class="pf-c-dropdown__toggle-text">Name</span>
2337
- <span class="pf-c-dropdown__toggle-icon">
2337
+ <div class="pf-c-select__toggle-wrapper">
2338
+ <span class="pf-c-select__toggle-icon">
2339
+ <i class="fas fa-filter" aria-hidden="true"></i>
2340
+ </span>
2341
+ <span class="pf-c-select__toggle-text">Name</span>
2342
+ </div>
2343
+ <span class="pf-c-select__toggle-arrow">
2338
2344
  <i class="fas fa-caret-down" aria-hidden="true"></i>
2339
2345
  </span>
2340
2346
  </button>
2347
+
2341
2348
  <ul
2342
- class="pf-c-dropdown__menu"
2343
- aria-labelledby="--button"
2349
+ class="pf-c-select__menu"
2350
+ role="listbox"
2351
+ aria-labelledby="-select-name-label"
2344
2352
  hidden
2353
+ style="width: 175px"
2345
2354
  >
2346
- <li>
2347
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
2355
+ <li role="presentation">
2356
+ <button
2357
+ class="pf-c-select__menu-item"
2358
+ role="option"
2359
+ >Running</button>
2348
2360
  </li>
2349
- <li>
2361
+ <li role="presentation">
2350
2362
  <button
2351
- class="pf-c-dropdown__menu-item"
2352
- type="button"
2353
- >Action</button>
2363
+ class="pf-c-select__menu-item pf-m-selected"
2364
+ role="option"
2365
+ aria-selected="true"
2366
+ >
2367
+ Stopped
2368
+ <span class="pf-c-select__menu-item-icon">
2369
+ <i class="fas fa-check" aria-hidden="true"></i>
2370
+ </span>
2371
+ </button>
2354
2372
  </li>
2355
- <li>
2356
- <a
2357
- class="pf-c-dropdown__menu-item pf-m-disabled"
2358
- href="#"
2359
- aria-disabled="true"
2360
- tabindex="-1"
2361
- >Disabled link</a>
2373
+ <li role="presentation">
2374
+ <button
2375
+ class="pf-c-select__menu-item"
2376
+ role="option"
2377
+ >Down</button>
2362
2378
  </li>
2363
- <li>
2379
+ <li role="presentation">
2364
2380
  <button
2365
- class="pf-c-dropdown__menu-item"
2366
- type="button"
2367
- disabled
2368
- >Disabled action</button>
2381
+ class="pf-c-select__menu-item"
2382
+ role="option"
2383
+ >Degraded</button>
2369
2384
  </li>
2370
- <li class="pf-c-divider" role="separator"></li>
2371
- <li>
2372
- <a
2373
- class="pf-c-dropdown__menu-item"
2374
- href="#"
2375
- >Separated link</a>
2385
+ <li role="presentation">
2386
+ <button
2387
+ class="pf-c-select__menu-item"
2388
+ role="option"
2389
+ >Needs maintenance</button>
2376
2390
  </li>
2377
2391
  </ul>
2378
2392
  </div>
2379
- <input
2380
- class="pf-c-form-control"
2381
- type="search"
2382
- id="--search-filter-input"
2383
- name="-search-filter-input"
2384
- aria-label="input with dropdown and button"
2385
- aria-describedby="--button"
2386
- />
2393
+ <div class="pf-c-search-input">
2394
+ <div class="pf-c-search-input__bar">
2395
+ <span class="pf-c-search-input__text">
2396
+ <span class="pf-c-search-input__icon">
2397
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
2398
+ </span>
2399
+ <input
2400
+ class="pf-c-search-input__text-input"
2401
+ type="text"
2402
+ placeholder="Filter by name"
2403
+ aria-label="Filter by name"
2404
+ />
2405
+ </span>
2406
+ </div>
2407
+ </div>
2387
2408
  </div>
2388
2409
  </div>
2389
2410
  </div>
@@ -3802,64 +3823,88 @@ wrapperTag: div
3802
3823
  aria-label="search filter"
3803
3824
  role="group"
3804
3825
  >
3805
- <div class="pf-c-dropdown">
3826
+ <div class="pf-c-select" style="width: 175px">
3827
+ <span id="-select-name-label" hidden>Choose one</span>
3828
+
3806
3829
  <button
3807
- class="pf-c-dropdown__toggle"
3808
- id="--button"
3809
- aria-expanded="false"
3830
+ class="pf-c-select__toggle"
3810
3831
  type="button"
3832
+ id="-select-name-toggle"
3833
+ aria-haspopup="true"
3834
+ aria-expanded="false"
3835
+ aria-labelledby="-select-name-label -select-name-toggle"
3811
3836
  >
3812
- <span class="pf-c-dropdown__toggle-text">Name</span>
3813
- <span class="pf-c-dropdown__toggle-icon">
3837
+ <div class="pf-c-select__toggle-wrapper">
3838
+ <span class="pf-c-select__toggle-icon">
3839
+ <i class="fas fa-filter" aria-hidden="true"></i>
3840
+ </span>
3841
+ <span class="pf-c-select__toggle-text">Name</span>
3842
+ </div>
3843
+ <span class="pf-c-select__toggle-arrow">
3814
3844
  <i class="fas fa-caret-down" aria-hidden="true"></i>
3815
3845
  </span>
3816
3846
  </button>
3847
+
3817
3848
  <ul
3818
- class="pf-c-dropdown__menu"
3819
- aria-labelledby="--button"
3849
+ class="pf-c-select__menu"
3850
+ role="listbox"
3851
+ aria-labelledby="-select-name-label"
3820
3852
  hidden
3853
+ style="width: 175px"
3821
3854
  >
3822
- <li>
3823
- <a class="pf-c-dropdown__menu-item" href="#">Link</a>
3855
+ <li role="presentation">
3856
+ <button
3857
+ class="pf-c-select__menu-item"
3858
+ role="option"
3859
+ >Running</button>
3824
3860
  </li>
3825
- <li>
3861
+ <li role="presentation">
3826
3862
  <button
3827
- class="pf-c-dropdown__menu-item"
3828
- type="button"
3829
- >Action</button>
3863
+ class="pf-c-select__menu-item pf-m-selected"
3864
+ role="option"
3865
+ aria-selected="true"
3866
+ >
3867
+ Stopped
3868
+ <span class="pf-c-select__menu-item-icon">
3869
+ <i class="fas fa-check" aria-hidden="true"></i>
3870
+ </span>
3871
+ </button>
3830
3872
  </li>
3831
- <li>
3832
- <a
3833
- class="pf-c-dropdown__menu-item pf-m-disabled"
3834
- href="#"
3835
- aria-disabled="true"
3836
- tabindex="-1"
3837
- >Disabled link</a>
3873
+ <li role="presentation">
3874
+ <button
3875
+ class="pf-c-select__menu-item"
3876
+ role="option"
3877
+ >Down</button>
3838
3878
  </li>
3839
- <li>
3879
+ <li role="presentation">
3840
3880
  <button
3841
- class="pf-c-dropdown__menu-item"
3842
- type="button"
3843
- disabled
3844
- >Disabled action</button>
3881
+ class="pf-c-select__menu-item"
3882
+ role="option"
3883
+ >Degraded</button>
3845
3884
  </li>
3846
- <li class="pf-c-divider" role="separator"></li>
3847
- <li>
3848
- <a
3849
- class="pf-c-dropdown__menu-item"
3850
- href="#"
3851
- >Separated link</a>
3885
+ <li role="presentation">
3886
+ <button
3887
+ class="pf-c-select__menu-item"
3888
+ role="option"
3889
+ >Needs maintenance</button>
3852
3890
  </li>
3853
3891
  </ul>
3854
3892
  </div>
3855
- <input
3856
- class="pf-c-form-control"
3857
- type="search"
3858
- id="--search-filter-input"
3859
- name="-search-filter-input"
3860
- aria-label="input with dropdown and button"
3861
- aria-describedby="--button"
3862
- />
3893
+ <div class="pf-c-search-input">
3894
+ <div class="pf-c-search-input__bar">
3895
+ <span class="pf-c-search-input__text">
3896
+ <span class="pf-c-search-input__icon">
3897
+ <i class="fas fa-search fa-fw" aria-hidden="true"></i>
3898
+ </span>
3899
+ <input
3900
+ class="pf-c-search-input__text-input"
3901
+ type="text"
3902
+ placeholder="Filter by name"
3903
+ aria-label="Filter by name"
3904
+ />
3905
+ </span>
3906
+ </div>
3907
+ </div>
3863
3908
  </div>
3864
3909
  </div>
3865
3910
  </div>
package/docs/demos/Drawer/examples/Drawer.md CHANGED
@@ -246,55 +246,35 @@ wrapperTag: div
246
246
  <section class="pf-c-page__main-section pf-m-limit-width">
247
247
  <div class="pf-c-page__main-body">
248
248
  <div class="pf-l-gallery pf-m-gutter">
249
- <div class="pf-l-gallery__item">
250
- <div class="pf-c-card">
251
- <div class="pf-c-card__body">This is a card</div>
252
- </div>
249
+ <div class="pf-c-card">
250
+ <div class="pf-c-card__body">This is a card</div>
253
251
  </div>
254
- <div class="pf-l-gallery__item">
255
- <div class="pf-c-card">
256
- <div class="pf-c-card__body">This is a card</div>
257
- </div>
252
+ <div class="pf-c-card">
253
+ <div class="pf-c-card__body">This is a card</div>
258
254
  </div>
259
- <div class="pf-l-gallery__item">
260
- <div class="pf-c-card">
261
- <div class="pf-c-card__body">This is a card</div>
262
- </div>
255
+ <div class="pf-c-card">
256
+ <div class="pf-c-card__body">This is a card</div>
263
257
  </div>
264
- <div class="pf-l-gallery__item">
265
- <div class="pf-c-card">
266
- <div class="pf-c-card__body">This is a card</div>
267
- </div>
258
+ <div class="pf-c-card">
259
+ <div class="pf-c-card__body">This is a card</div>
268
260
  </div>
269
- <div class="pf-l-gallery__item">
270
- <div class="pf-c-card">
271
- <div class="pf-c-card__body">This is a card</div>
272
- </div>
261
+ <div class="pf-c-card">
262
+ <div class="pf-c-card__body">This is a card</div>
273
263
  </div>
274
- <div class="pf-l-gallery__item">
275
- <div class="pf-c-card">
276
- <div class="pf-c-card__body">This is a card</div>
277
- </div>
264
+ <div class="pf-c-card">
265
+ <div class="pf-c-card__body">This is a card</div>
278
266
  </div>
279
- <div class="pf-l-gallery__item">
280
- <div class="pf-c-card">
281
- <div class="pf-c-card__body">This is a card</div>
282
- </div>
267
+ <div class="pf-c-card">
268
+ <div class="pf-c-card__body">This is a card</div>
283
269
  </div>
284
- <div class="pf-l-gallery__item">
285
- <div class="pf-c-card">
286
- <div class="pf-c-card__body">This is a card</div>
287
- </div>
270
+ <div class="pf-c-card">
271
+ <div class="pf-c-card__body">This is a card</div>
288
272
  </div>
289
- <div class="pf-l-gallery__item">
290
- <div class="pf-c-card">
291
- <div class="pf-c-card__body">This is a card</div>
292
- </div>
273
+ <div class="pf-c-card">
274
+ <div class="pf-c-card__body">This is a card</div>
293
275
  </div>
294
- <div class="pf-l-gallery__item">
295
- <div class="pf-c-card">
296
- <div class="pf-c-card__body">This is a card</div>
297
- </div>
276
+ <div class="pf-c-card">
277
+ <div class="pf-c-card__body">This is a card</div>
298
278
  </div>
299
279
  </div>
300
280
  </div>
@@ -556,55 +536,35 @@ wrapperTag: div
556
536
  <section class="pf-c-page__main-section pf-m-limit-width">
557
537
  <div class="pf-c-page__main-body">
558
538
  <div class="pf-l-gallery pf-m-gutter">
559
- <div class="pf-l-gallery__item">
560
- <div class="pf-c-card">
561
- <div class="pf-c-card__body">This is a card</div>
562
- </div>
539
+ <div class="pf-c-card">
540
+ <div class="pf-c-card__body">This is a card</div>
563
541
  </div>
564
- <div class="pf-l-gallery__item">
565
- <div class="pf-c-card">
566
- <div class="pf-c-card__body">This is a card</div>
567
- </div>
542
+ <div class="pf-c-card">
543
+ <div class="pf-c-card__body">This is a card</div>
568
544
  </div>
569
- <div class="pf-l-gallery__item">
570
- <div class="pf-c-card">
571
- <div class="pf-c-card__body">This is a card</div>
572
- </div>
545
+ <div class="pf-c-card">
546
+ <div class="pf-c-card__body">This is a card</div>
573
547
  </div>
574
- <div class="pf-l-gallery__item">
575
- <div class="pf-c-card">
576
- <div class="pf-c-card__body">This is a card</div>
577
- </div>
548
+ <div class="pf-c-card">
549
+ <div class="pf-c-card__body">This is a card</div>
578
550
  </div>
579
- <div class="pf-l-gallery__item">
580
- <div class="pf-c-card">
581
- <div class="pf-c-card__body">This is a card</div>
582
- </div>
551
+ <div class="pf-c-card">
552
+ <div class="pf-c-card__body">This is a card</div>
583
553
  </div>
584
- <div class="pf-l-gallery__item">
585
- <div class="pf-c-card">
586
- <div class="pf-c-card__body">This is a card</div>
587
- </div>
554
+ <div class="pf-c-card">
555
+ <div class="pf-c-card__body">This is a card</div>
588
556
  </div>
589
- <div class="pf-l-gallery__item">
590
- <div class="pf-c-card">
591
- <div class="pf-c-card__body">This is a card</div>
592
- </div>
557
+ <div class="pf-c-card">
558
+ <div class="pf-c-card__body">This is a card</div>
593
559
  </div>
594
- <div class="pf-l-gallery__item">
595
- <div class="pf-c-card">
596
- <div class="pf-c-card__body">This is a card</div>
597
- </div>
560
+ <div class="pf-c-card">
561
+ <div class="pf-c-card__body">This is a card</div>
598
562
  </div>
599
- <div class="pf-l-gallery__item">
600
- <div class="pf-c-card">
601
- <div class="pf-c-card__body">This is a card</div>
602
- </div>
563
+ <div class="pf-c-card">
564
+ <div class="pf-c-card__body">This is a card</div>
603
565
  </div>
604
- <div class="pf-l-gallery__item">
605
- <div class="pf-c-card">
606
- <div class="pf-c-card__body">This is a card</div>
607
- </div>
566
+ <div class="pf-c-card">
567
+ <div class="pf-c-card__body">This is a card</div>
608
568
  </div>
609
569
  </div>
610
570
  </div>
@@ -866,55 +826,35 @@ wrapperTag: div
866
826
  <section class="pf-c-page__main-section pf-m-limit-width">
867
827
  <div class="pf-c-page__main-body">
868
828
  <div class="pf-l-gallery pf-m-gutter">
869
- <div class="pf-l-gallery__item">
870
- <div class="pf-c-card">
871
- <div class="pf-c-card__body">This is a card</div>
872
- </div>
829
+ <div class="pf-c-card">
830
+ <div class="pf-c-card__body">This is a card</div>
873
831
  </div>
874
- <div class="pf-l-gallery__item">
875
- <div class="pf-c-card">
876
- <div class="pf-c-card__body">This is a card</div>
877
- </div>
832
+ <div class="pf-c-card">
833
+ <div class="pf-c-card__body">This is a card</div>
878
834
  </div>
879
- <div class="pf-l-gallery__item">
880
- <div class="pf-c-card">
881
- <div class="pf-c-card__body">This is a card</div>
882
- </div>
835
+ <div class="pf-c-card">
836
+ <div class="pf-c-card__body">This is a card</div>
883
837
  </div>
884
- <div class="pf-l-gallery__item">
885
- <div class="pf-c-card">
886
- <div class="pf-c-card__body">This is a card</div>
887
- </div>
838
+ <div class="pf-c-card">
839
+ <div class="pf-c-card__body">This is a card</div>
888
840
  </div>
889
- <div class="pf-l-gallery__item">
890
- <div class="pf-c-card">
891
- <div class="pf-c-card__body">This is a card</div>
892
- </div>
841
+ <div class="pf-c-card">
842
+ <div class="pf-c-card__body">This is a card</div>
893
843
  </div>
894
- <div class="pf-l-gallery__item">
895
- <div class="pf-c-card">
896
- <div class="pf-c-card__body">This is a card</div>
897
- </div>
844
+ <div class="pf-c-card">
845
+ <div class="pf-c-card__body">This is a card</div>
898
846
  </div>
899
- <div class="pf-l-gallery__item">
900
- <div class="pf-c-card">
901
- <div class="pf-c-card__body">This is a card</div>
902
- </div>
847
+ <div class="pf-c-card">
848
+ <div class="pf-c-card__body">This is a card</div>
903
849
  </div>
904
- <div class="pf-l-gallery__item">
905
- <div class="pf-c-card">
906
- <div class="pf-c-card__body">This is a card</div>
907
- </div>
850
+ <div class="pf-c-card">
851
+ <div class="pf-c-card__body">This is a card</div>
908
852
  </div>
909
- <div class="pf-l-gallery__item">
910
- <div class="pf-c-card">
911
- <div class="pf-c-card__body">This is a card</div>
912
- </div>
853
+ <div class="pf-c-card">
854
+ <div class="pf-c-card__body">This is a card</div>
913
855
  </div>
914
- <div class="pf-l-gallery__item">
915
- <div class="pf-c-card">
916
- <div class="pf-c-card__body">This is a card</div>
917
- </div>
856
+ <div class="pf-c-card">
857
+ <div class="pf-c-card__body">This is a card</div>
918
858
  </div>
919
859
  </div>
920
860
  </div>