@patternfly/patternfly 4.177.0 → 4.177.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.
@@ -3785,59 +3785,1189 @@ wrapperTag: div
3785
3785
  </div>
3786
3786
  </div>
3787
3787
  </section>
3788
- <section class="pf-c-page__main-section pf-m-limit-width">
3789
- <div class="pf-c-page__main-body">
3790
- <div class="pf-l-gallery pf-m-gutter">
3791
- <div class="pf-l-gallery__item">
3792
- <div class="pf-c-card">
3793
- <div class="pf-c-card__body">This is a card</div>
3794
- </div>
3795
- </div>
3796
- <div class="pf-l-gallery__item">
3797
- <div class="pf-c-card">
3798
- <div class="pf-c-card__body">This is a card</div>
3799
- </div>
3800
- </div>
3801
- <div class="pf-l-gallery__item">
3802
- <div class="pf-c-card">
3803
- <div class="pf-c-card__body">This is a card</div>
3804
- </div>
3805
- </div>
3806
- <div class="pf-l-gallery__item">
3807
- <div class="pf-c-card">
3808
- <div class="pf-c-card__body">This is a card</div>
3788
+ <section class="pf-c-page__main-section pf-m-no-padding pf-m-padding-on-xl">
3789
+ <div class="pf-c-card">
3790
+ <div class="pf-c-toolbar">
3791
+ <div class="pf-c-toolbar__content">
3792
+ <div class="pf-c-toolbar__content-section pf-m-nowrap">
3793
+ <div
3794
+ class="pf-c-toolbar__group pf-m-toggle-group pf-m-show-on-xl"
3795
+ >
3796
+ <div class="pf-c-toolbar__toggle">
3797
+ <button
3798
+ class="pf-c-button pf-m-plain"
3799
+ type="button"
3800
+ aria-label="Show filters"
3801
+ aria-expanded="false"
3802
+ aria-controls="-expandable-content"
3803
+ >
3804
+ <i class="fas fa-filter" aria-hidden="true"></i>
3805
+ </button>
3806
+ </div>
3807
+ <div class="pf-c-toolbar__item pf-m-bulk-select">
3808
+ <div class="pf-c-dropdown">
3809
+ <div class="pf-c-dropdown__toggle pf-m-split-button">
3810
+ <label
3811
+ class="pf-c-dropdown__toggle-check"
3812
+ for="-bulk-select-toggle-check"
3813
+ >
3814
+ <input
3815
+ type="checkbox"
3816
+ id="-bulk-select-toggle-check"
3817
+ aria-label="Select all"
3818
+ />
3819
+ </label>
3820
+
3821
+ <button
3822
+ class="pf-c-dropdown__toggle-button"
3823
+ type="button"
3824
+ aria-expanded="false"
3825
+ id="-bulk-select-toggle-button"
3826
+ aria-label="Dropdown toggle"
3827
+ >
3828
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3829
+ </button>
3830
+ </div>
3831
+ <ul class="pf-c-dropdown__menu" hidden>
3832
+ <li>
3833
+ <button
3834
+ class="pf-c-dropdown__menu-item"
3835
+ type="button"
3836
+ >Select all</button>
3837
+ </li>
3838
+ <li>
3839
+ <button
3840
+ class="pf-c-dropdown__menu-item"
3841
+ type="button"
3842
+ >Select none</button>
3843
+ </li>
3844
+ <li>
3845
+ <button
3846
+ class="pf-c-dropdown__menu-item"
3847
+ type="button"
3848
+ >Other action</button>
3849
+ </li>
3850
+ </ul>
3851
+ </div>
3852
+ </div>
3853
+
3854
+ <div class="pf-c-toolbar__item pf-m-search-filter">
3855
+ <div
3856
+ class="pf-c-input-group"
3857
+ aria-label="search filter"
3858
+ role="group"
3859
+ >
3860
+ <div class="pf-c-dropdown">
3861
+ <button
3862
+ class="pf-c-dropdown__toggle"
3863
+ id="--button"
3864
+ aria-expanded="false"
3865
+ type="button"
3866
+ >
3867
+ <span class="pf-c-dropdown__toggle-text">Name</span>
3868
+ <span class="pf-c-dropdown__toggle-icon">
3869
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3870
+ </span>
3871
+ </button>
3872
+ <ul
3873
+ class="pf-c-dropdown__menu"
3874
+ aria-labelledby="--button"
3875
+ hidden
3876
+ >
3877
+ <li>
3878
+ <a class="pf-c-dropdown__menu-item" href="#">Link</a>
3879
+ </li>
3880
+ <li>
3881
+ <button
3882
+ class="pf-c-dropdown__menu-item"
3883
+ type="button"
3884
+ >Action</button>
3885
+ </li>
3886
+ <li>
3887
+ <a
3888
+ class="pf-c-dropdown__menu-item pf-m-disabled"
3889
+ href="#"
3890
+ aria-disabled="true"
3891
+ tabindex="-1"
3892
+ >Disabled link</a>
3893
+ </li>
3894
+ <li>
3895
+ <button
3896
+ class="pf-c-dropdown__menu-item"
3897
+ type="button"
3898
+ disabled
3899
+ >Disabled action</button>
3900
+ </li>
3901
+ <li class="pf-c-divider" role="separator"></li>
3902
+ <li>
3903
+ <a
3904
+ class="pf-c-dropdown__menu-item"
3905
+ href="#"
3906
+ >Separated link</a>
3907
+ </li>
3908
+ </ul>
3909
+ </div>
3910
+ <input
3911
+ class="pf-c-form-control"
3912
+ type="search"
3913
+ id="--search-filter-input"
3914
+ name="-search-filter-input"
3915
+ aria-label="input with dropdown and button"
3916
+ aria-describedby="--button"
3917
+ />
3918
+ </div>
3919
+ </div>
3920
+
3921
+ <div class="pf-c-toolbar__group pf-m-filter-group">
3922
+ <div class="pf-c-toolbar__item">
3923
+ <div class="pf-c-select">
3924
+ <span id="-select-checkbox-status-label" hidden>Choose one</span>
3925
+
3926
+ <button
3927
+ class="pf-c-select__toggle"
3928
+ type="button"
3929
+ id="-select-checkbox-status-toggle"
3930
+ aria-haspopup="true"
3931
+ aria-expanded="false"
3932
+ aria-labelledby="-select-checkbox-status-label -select-checkbox-status-toggle"
3933
+ >
3934
+ <div class="pf-c-select__toggle-wrapper">
3935
+ <span class="pf-c-select__toggle-text">Status</span>
3936
+ </div>
3937
+ <span class="pf-c-select__toggle-arrow">
3938
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
3939
+ </span>
3940
+ </button>
3941
+
3942
+ <div class="pf-c-select__menu" hidden>
3943
+ <fieldset
3944
+ class="pf-c-select__menu-fieldset"
3945
+ aria-label="Select input"
3946
+ >
3947
+ <label
3948
+ class="pf-c-check pf-c-select__menu-item pf-m-description"
3949
+ for="-select-checkbox-status-active"
3950
+ >
3951
+ <input
3952
+ class="pf-c-check__input"
3953
+ type="checkbox"
3954
+ id="-select-checkbox-status-active"
3955
+ name="-select-checkbox-status-active"
3956
+ />
3957
+
3958
+ <span class="pf-c-check__label">Active</span>
3959
+ <span
3960
+ class="pf-c-check__description"
3961
+ >This is a description</span>
3962
+ </label>
3963
+ <label
3964
+ class="pf-c-check pf-c-select__menu-item pf-m-description"
3965
+ for="-select-checkbox-status-canceled"
3966
+ >
3967
+ <input
3968
+ class="pf-c-check__input"
3969
+ type="checkbox"
3970
+ id="-select-checkbox-status-canceled"
3971
+ name="-select-checkbox-status-canceled"
3972
+ />
3973
+
3974
+ <span class="pf-c-check__label">Canceled</span>
3975
+ <span
3976
+ class="pf-c-check__description"
3977
+ >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
3978
+ </label>
3979
+ <label
3980
+ class="pf-c-check pf-c-select__menu-item"
3981
+ for="-select-checkbox-status-paused"
3982
+ >
3983
+ <input
3984
+ class="pf-c-check__input"
3985
+ type="checkbox"
3986
+ id="-select-checkbox-status-paused"
3987
+ name="-select-checkbox-status-paused"
3988
+ />
3989
+
3990
+ <span class="pf-c-check__label">Paused</span>
3991
+ </label>
3992
+ <label
3993
+ class="pf-c-check pf-c-select__menu-item"
3994
+ for="-select-checkbox-status-warning"
3995
+ >
3996
+ <input
3997
+ class="pf-c-check__input"
3998
+ type="checkbox"
3999
+ id="-select-checkbox-status-warning"
4000
+ name="-select-checkbox-status-warning"
4001
+ />
4002
+
4003
+ <span class="pf-c-check__label">Warning</span>
4004
+ </label>
4005
+ <label
4006
+ class="pf-c-check pf-c-select__menu-item"
4007
+ for="-select-checkbox-status-restarted"
4008
+ >
4009
+ <input
4010
+ class="pf-c-check__input"
4011
+ type="checkbox"
4012
+ id="-select-checkbox-status-restarted"
4013
+ name="-select-checkbox-status-restarted"
4014
+ />
4015
+
4016
+ <span class="pf-c-check__label">Restarted</span>
4017
+ </label>
4018
+ </fieldset>
4019
+ </div>
4020
+ </div>
4021
+ </div>
4022
+ <div class="pf-c-toolbar__item">
4023
+ <div class="pf-c-select">
4024
+ <span id="-select-checkbox-risk-label" hidden>Choose one</span>
4025
+
4026
+ <button
4027
+ class="pf-c-select__toggle"
4028
+ type="button"
4029
+ id="-select-checkbox-risk-toggle"
4030
+ aria-haspopup="true"
4031
+ aria-expanded="false"
4032
+ aria-labelledby="-select-checkbox-risk-label -select-checkbox-risk-toggle"
4033
+ >
4034
+ <div class="pf-c-select__toggle-wrapper">
4035
+ <span class="pf-c-select__toggle-text">Risk</span>
4036
+ </div>
4037
+ <span class="pf-c-select__toggle-arrow">
4038
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
4039
+ </span>
4040
+ </button>
4041
+
4042
+ <div class="pf-c-select__menu" hidden>
4043
+ <fieldset
4044
+ class="pf-c-select__menu-fieldset"
4045
+ aria-label="Select input"
4046
+ >
4047
+ <label
4048
+ class="pf-c-check pf-c-select__menu-item pf-m-description"
4049
+ for="-select-checkbox-risk-active"
4050
+ >
4051
+ <input
4052
+ class="pf-c-check__input"
4053
+ type="checkbox"
4054
+ id="-select-checkbox-risk-active"
4055
+ name="-select-checkbox-risk-active"
4056
+ />
4057
+
4058
+ <span class="pf-c-check__label">Active</span>
4059
+ <span
4060
+ class="pf-c-check__description"
4061
+ >This is a description</span>
4062
+ </label>
4063
+ <label
4064
+ class="pf-c-check pf-c-select__menu-item pf-m-description"
4065
+ for="-select-checkbox-risk-canceled"
4066
+ >
4067
+ <input
4068
+ class="pf-c-check__input"
4069
+ type="checkbox"
4070
+ id="-select-checkbox-risk-canceled"
4071
+ name="-select-checkbox-risk-canceled"
4072
+ />
4073
+
4074
+ <span class="pf-c-check__label">Canceled</span>
4075
+ <span
4076
+ class="pf-c-check__description"
4077
+ >This is a really long description that describes the menu item. This is a really long description that describes the menu item.</span>
4078
+ </label>
4079
+ <label
4080
+ class="pf-c-check pf-c-select__menu-item"
4081
+ for="-select-checkbox-risk-paused"
4082
+ >
4083
+ <input
4084
+ class="pf-c-check__input"
4085
+ type="checkbox"
4086
+ id="-select-checkbox-risk-paused"
4087
+ name="-select-checkbox-risk-paused"
4088
+ />
4089
+
4090
+ <span class="pf-c-check__label">Paused</span>
4091
+ </label>
4092
+ <label
4093
+ class="pf-c-check pf-c-select__menu-item"
4094
+ for="-select-checkbox-risk-warning"
4095
+ >
4096
+ <input
4097
+ class="pf-c-check__input"
4098
+ type="checkbox"
4099
+ id="-select-checkbox-risk-warning"
4100
+ name="-select-checkbox-risk-warning"
4101
+ />
4102
+
4103
+ <span class="pf-c-check__label">Warning</span>
4104
+ </label>
4105
+ <label
4106
+ class="pf-c-check pf-c-select__menu-item"
4107
+ for="-select-checkbox-risk-restarted"
4108
+ >
4109
+ <input
4110
+ class="pf-c-check__input"
4111
+ type="checkbox"
4112
+ id="-select-checkbox-risk-restarted"
4113
+ name="-select-checkbox-risk-restarted"
4114
+ />
4115
+
4116
+ <span class="pf-c-check__label">Restarted</span>
4117
+ </label>
4118
+ </fieldset>
4119
+ </div>
4120
+ </div>
4121
+ </div>
4122
+ </div>
4123
+ </div>
4124
+
4125
+ <div class="pf-c-toolbar__item">
4126
+ <button
4127
+ class="pf-c-button pf-m-plain"
4128
+ type="button"
4129
+ aria-label="Sort"
4130
+ >
4131
+ <i class="fas fa-sort-amount-down" aria-hidden="true"></i>
4132
+ </button>
4133
+ </div>
4134
+
4135
+ <div class="pf-c-toolbar__item pf-m-pagination">
4136
+ <div class="pf-c-pagination pf-m-compact">
4137
+ <div class="pf-c-options-menu">
4138
+ <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
4139
+ <span class="pf-c-options-menu__toggle-text">
4140
+ <b>1 - 10</b>&nbsp;of&nbsp;
4141
+ <b>36</b>
4142
+ </span>
4143
+ <button
4144
+ class="pf-c-options-menu__toggle-button"
4145
+ id="-top-pagination-toggle"
4146
+ aria-haspopup="listbox"
4147
+ aria-expanded="false"
4148
+ aria-label="Items per page"
4149
+ >
4150
+ <span class="pf-c-options-menu__toggle-button-icon">
4151
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
4152
+ </span>
4153
+ </button>
4154
+ </div>
4155
+ <ul
4156
+ class="pf-c-options-menu__menu"
4157
+ aria-labelledby="-top-pagination-toggle"
4158
+ hidden
4159
+ >
4160
+ <li>
4161
+ <button
4162
+ class="pf-c-options-menu__menu-item"
4163
+ type="button"
4164
+ >5 per page</button>
4165
+ </li>
4166
+ <li>
4167
+ <button
4168
+ class="pf-c-options-menu__menu-item"
4169
+ type="button"
4170
+ >
4171
+ 10 per page
4172
+ <div class="pf-c-options-menu__menu-item-icon">
4173
+ <i class="fas fa-check" aria-hidden="true"></i>
4174
+ </div>
4175
+ </button>
4176
+ </li>
4177
+ <li>
4178
+ <button
4179
+ class="pf-c-options-menu__menu-item"
4180
+ type="button"
4181
+ >20 per page</button>
4182
+ </li>
4183
+ </ul>
4184
+ </div>
4185
+ <nav
4186
+ class="pf-c-pagination__nav"
4187
+ aria-label="Toolbar top pagination"
4188
+ >
4189
+ <div class="pf-c-pagination__nav-control pf-m-prev">
4190
+ <button
4191
+ class="pf-c-button pf-m-plain"
4192
+ type="button"
4193
+ disabled
4194
+ aria-label="Go to previous page"
4195
+ >
4196
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
4197
+ </button>
4198
+ </div>
4199
+ <div class="pf-c-pagination__nav-control pf-m-next">
4200
+ <button
4201
+ class="pf-c-button pf-m-plain"
4202
+ type="button"
4203
+ aria-label="Go to next page"
4204
+ >
4205
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
4206
+ </button>
4207
+ </div>
4208
+ </nav>
4209
+ </div>
4210
+ </div>
3809
4211
  </div>
4212
+
4213
+ <div
4214
+ class="pf-c-toolbar__expandable-content pf-m-hidden"
4215
+ id="-expandable-content"
4216
+ hidden
4217
+ ></div>
3810
4218
  </div>
3811
- <div class="pf-l-gallery__item">
3812
- <div class="pf-c-card">
3813
- <div class="pf-c-card__body">This is a card</div>
4219
+ </div>
4220
+ <table
4221
+ class="pf-c-table pf-m-expandable pf-m-grid-md"
4222
+ role="grid"
4223
+ aria-label="Expandable table example"
4224
+ id="expandable-demo-table"
4225
+ >
4226
+ <thead>
4227
+ <tr role="row">
4228
+ <td class="pf-c-table__toggle" role="cell">
4229
+ <button
4230
+ class="pf-c-button pf-m-plain"
4231
+ id="expandable-demo-table-expandable-toggle-thead"
4232
+ aria-label="Expand all"
4233
+ >
4234
+ <div class="pf-c-table__toggle-icon">
4235
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
4236
+ </div>
4237
+ </button>
4238
+ </td>
4239
+
4240
+ <td></td>
4241
+ <th
4242
+ class="pf-m-width-30"
4243
+ role="columnheader"
4244
+ scope="col"
4245
+ >Repositories</th>
4246
+ <th role="columnheader" scope="col">Branches</th>
4247
+ <th role="columnheader" scope="col">Pull requests</th>
4248
+ <th role="columnheader" scope="col">Work spaces</th>
4249
+ <th role="columnheader" scope="col">Last commit</th>
4250
+ <td></td>
4251
+ <td></td>
4252
+ </tr>
4253
+ </thead>
4254
+
4255
+ <tbody role="rowgroup">
4256
+ <tr role="row">
4257
+ <td class="pf-c-table__toggle" role="cell">
4258
+ <button
4259
+ class="pf-c-button pf-m-plain"
4260
+ aria-labelledby="expandable-demo-table-node1 expandable-toggle1"
4261
+ id="expandable-toggle1"
4262
+ aria-label="Details"
4263
+ aria-controls="expandable-demo-table-content1"
4264
+ >
4265
+ <div class="pf-c-table__toggle-icon">
4266
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
4267
+ </div>
4268
+ </button>
4269
+ </td>
4270
+
4271
+ <td class="pf-c-table__check" role="cell">
4272
+ <input
4273
+ type="checkbox"
4274
+ name="checkrow1"
4275
+ aria-labelledby="expandable-demo-table-node1"
4276
+ />
4277
+ </td>
4278
+ <th role="columnheader" data-label="Repository name">
4279
+ <div>
4280
+ <div id="expandable-demo-table-node1">Node 1</div>
4281
+ <a href="#">siemur/test-space</a>
4282
+ </div>
4283
+ </th>
4284
+ <td role="cell" data-label="Branches">
4285
+ <span>
4286
+ <i class="fas fa-code-branch"></i> 10
4287
+ </span>
4288
+ </td>
4289
+ <td role="cell" data-label="Pull requests">
4290
+ <span>
4291
+ <i class="fas fa-code"></i> 25
4292
+ </span>
4293
+ </td>
4294
+ <td role="cell" data-label="Work spaces">
4295
+ <span>
4296
+ <i class="fas fa-cube"></i> 5
4297
+ </span>
4298
+ </td>
4299
+ <td role="cell" data-label="Last commit">2 days ago</td>
4300
+ <td role="cell" data-label="Action">
4301
+ <a href="#">Action link</a>
4302
+ </td>
4303
+ <td class="pf-c-table__action" role="cell">
4304
+ <div class="pf-c-dropdown">
4305
+ <button
4306
+ class="pf-c-dropdown__toggle pf-m-plain"
4307
+ id="expandable-demo-table-dropdown-kebab-1-button"
4308
+ aria-expanded="false"
4309
+ type="button"
4310
+ aria-label="Actions"
4311
+ >
4312
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4313
+ </button>
4314
+ <ul
4315
+ class="pf-c-dropdown__menu pf-m-align-right"
4316
+ aria-labelledby="expandable-demo-table-dropdown-kebab-1-button"
4317
+ hidden
4318
+ >
4319
+ <li>
4320
+ <a class="pf-c-dropdown__menu-item" href="#">Link</a>
4321
+ </li>
4322
+ <li>
4323
+ <button
4324
+ class="pf-c-dropdown__menu-item"
4325
+ type="button"
4326
+ >Action</button>
4327
+ </li>
4328
+ <li>
4329
+ <a
4330
+ class="pf-c-dropdown__menu-item pf-m-disabled"
4331
+ href="#"
4332
+ aria-disabled="true"
4333
+ tabindex="-1"
4334
+ >Disabled link</a>
4335
+ </li>
4336
+ <li>
4337
+ <button
4338
+ class="pf-c-dropdown__menu-item"
4339
+ type="button"
4340
+ disabled
4341
+ >Disabled action</button>
4342
+ </li>
4343
+ <li class="pf-c-divider" role="separator"></li>
4344
+ <li>
4345
+ <a
4346
+ class="pf-c-dropdown__menu-item"
4347
+ href="#"
4348
+ >Separated link</a>
4349
+ </li>
4350
+ </ul>
4351
+ </div>
4352
+ </td>
4353
+ </tr>
4354
+
4355
+ <tr class="pf-c-table__expandable-row" role="row">
4356
+ <td role="cell"></td>
4357
+
4358
+ <td role="cell"></td>
4359
+
4360
+ <td
4361
+ class
4362
+ role="cell"
4363
+ colspan="7"
4364
+ id="expandable-demo-table-content1"
4365
+ >
4366
+ <div class="pf-c-table__expandable-row-content">
4367
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
4368
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
4369
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
4370
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
4371
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
4372
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
4373
+ </div>
4374
+ </td>
4375
+ <td role="cell"></td>
4376
+ </tr>
4377
+ </tbody>
4378
+
4379
+ <tbody class="pf-m-expanded" role="rowgroup">
4380
+ <tr role="row">
4381
+ <td class="pf-c-table__toggle" role="cell">
4382
+ <button
4383
+ class="pf-c-button pf-m-plain pf-m-expanded"
4384
+ aria-labelledby="expandable-demo-table-node2 expandable-toggle2"
4385
+ id="expandable-toggle2"
4386
+ aria-label="Details"
4387
+ aria-controls="expandable-demo-table-content2"
4388
+ aria-expanded="true"
4389
+ >
4390
+ <div class="pf-c-table__toggle-icon">
4391
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
4392
+ </div>
4393
+ </button>
4394
+ </td>
4395
+
4396
+ <td class="pf-c-table__check" role="cell">
4397
+ <input
4398
+ type="checkbox"
4399
+ name="checkrow2"
4400
+ aria-labelledby="expandable-demo-table-node2"
4401
+ />
4402
+ </td>
4403
+ <td role="cell" data-label="Repository name">
4404
+ <div>
4405
+ <div id="expandable-demo-table-node2">Node 2</div>
4406
+ <a href="#">siemur/test-space</a>
4407
+ </div>
4408
+ </td>
4409
+ <td role="cell" data-label="Branches">
4410
+ <span>
4411
+ <i class="fas fa-code-branch"></i> 10
4412
+ </span>
4413
+ </td>
4414
+ <td role="cell" data-label="Pull requests">
4415
+ <span>
4416
+ <i class="fas fa-code"></i> 5
4417
+ </span>
4418
+ </td>
4419
+ <td role="cell" data-label="Work spaces">
4420
+ <span>
4421
+ <i class="fas fa-cube"></i> 8
4422
+ </span>
4423
+ </td>
4424
+ <td role="cell" data-label="Last commit">2 days ago</td>
4425
+ <td role="cell" data-label="Action">
4426
+ <a href="#">Action link</a>
4427
+ </td>
4428
+ <td class="pf-c-table__action" role="cell">
4429
+ <div class="pf-c-dropdown">
4430
+ <button
4431
+ class="pf-c-dropdown__toggle pf-m-plain"
4432
+ id="expandable-demo-table-dropdown-kebab-3-button"
4433
+ aria-expanded="false"
4434
+ type="button"
4435
+ aria-label="Actions"
4436
+ >
4437
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4438
+ </button>
4439
+ <ul
4440
+ class="pf-c-dropdown__menu pf-m-align-right"
4441
+ aria-labelledby="expandable-demo-table-dropdown-kebab-3-button"
4442
+ hidden
4443
+ >
4444
+ <li>
4445
+ <a class="pf-c-dropdown__menu-item" href="#">Link</a>
4446
+ </li>
4447
+ <li>
4448
+ <button
4449
+ class="pf-c-dropdown__menu-item"
4450
+ type="button"
4451
+ >Action</button>
4452
+ </li>
4453
+ <li>
4454
+ <a
4455
+ class="pf-c-dropdown__menu-item pf-m-disabled"
4456
+ href="#"
4457
+ aria-disabled="true"
4458
+ tabindex="-1"
4459
+ >Disabled link</a>
4460
+ </li>
4461
+ <li>
4462
+ <button
4463
+ class="pf-c-dropdown__menu-item"
4464
+ type="button"
4465
+ disabled
4466
+ >Disabled action</button>
4467
+ </li>
4468
+ <li class="pf-c-divider" role="separator"></li>
4469
+ <li>
4470
+ <a
4471
+ class="pf-c-dropdown__menu-item"
4472
+ href="#"
4473
+ >Separated link</a>
4474
+ </li>
4475
+ </ul>
4476
+ </div>
4477
+ </td>
4478
+ </tr>
4479
+
4480
+ <tr class="pf-c-table__expandable-row pf-m-expanded" role="row">
4481
+ <td role="cell"></td>
4482
+
4483
+ <td role="cell"></td>
4484
+
4485
+ <td
4486
+ class
4487
+ role="cell"
4488
+ colspan="5"
4489
+ id="expandable-demo-table-content2"
4490
+ >
4491
+ <div class="pf-c-table__expandable-row-content">
4492
+ <div class="pf-c-content">
4493
+ <p>
4494
+ Git URL:
4495
+ <small>http://github.com/mindreeper2420/rhuxd.git</small>
4496
+ </p>
4497
+ <p>
4498
+ Latest commit SHA1
4499
+ <small>64ae92893d7a98c71b3ef56835ed1c96354526be</small>
4500
+ </p>
4501
+ <p>
4502
+ Status
4503
+ <small>20 total files changed</small>
4504
+ </p>
4505
+ <p>
4506
+ License
4507
+ <small>Apache License 2.9</small>
4508
+ </p>
4509
+ </div>
4510
+ </div>
4511
+ </td>
4512
+ <td role="cell"></td>
4513
+ <td role="cell"></td>
4514
+ </tr>
4515
+ </tbody>
4516
+
4517
+ <tbody role="rowgroup">
4518
+ <tr role="row">
4519
+ <td class="pf-c-table__toggle" role="cell">
4520
+ <button
4521
+ class="pf-c-button pf-m-plain"
4522
+ aria-labelledby="expandable-demo-table-node3 expandable-toggle3"
4523
+ id="expandable-toggle3"
4524
+ aria-label="Details"
4525
+ aria-controls="expandable-demo-table-content3"
4526
+ >
4527
+ <div class="pf-c-table__toggle-icon">
4528
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
4529
+ </div>
4530
+ </button>
4531
+ </td>
4532
+
4533
+ <td class="pf-c-table__check" role="cell">
4534
+ <input
4535
+ type="checkbox"
4536
+ name="checkrow3"
4537
+ aria-labelledby="expandable-demo-table-node3"
4538
+ />
4539
+ </td>
4540
+ <th role="columnheader" data-label="Repository name">
4541
+ <div>
4542
+ <div id="expandable-demo-table-node3">Node 3</div>
4543
+ <a href="#">siemur/test-space</a>
4544
+ </div>
4545
+ </th>
4546
+ <td role="cell" data-label="Branches">
4547
+ <span>
4548
+ <i class="fas fa-code-branch"></i> 10
4549
+ </span>
4550
+ </td>
4551
+ <td role="cell" data-label="Pull requests">
4552
+ <span>
4553
+ <i class="fas fa-code"></i> 25
4554
+ </span>
4555
+ </td>
4556
+ <td role="cell" data-label="Work spaces">
4557
+ <span>
4558
+ <i class="fas fa-cube"></i> 5
4559
+ </span>
4560
+ </td>
4561
+ <td role="cell" data-label="Last commit">2 days ago</td>
4562
+ <td role="cell" data-label="Action">
4563
+ <a href="#">Action link</a>
4564
+ </td>
4565
+ <td class="pf-c-table__action" role="cell">
4566
+ <div class="pf-c-dropdown">
4567
+ <button
4568
+ class="pf-c-dropdown__toggle pf-m-plain"
4569
+ id="expandable-demo-table-dropdown-kebab-4-button"
4570
+ aria-expanded="false"
4571
+ type="button"
4572
+ aria-label="Actions"
4573
+ >
4574
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4575
+ </button>
4576
+ <ul
4577
+ class="pf-c-dropdown__menu pf-m-align-right"
4578
+ aria-labelledby="expandable-demo-table-dropdown-kebab-4-button"
4579
+ hidden
4580
+ >
4581
+ <li>
4582
+ <a class="pf-c-dropdown__menu-item" href="#">Link</a>
4583
+ </li>
4584
+ <li>
4585
+ <button
4586
+ class="pf-c-dropdown__menu-item"
4587
+ type="button"
4588
+ >Action</button>
4589
+ </li>
4590
+ <li>
4591
+ <a
4592
+ class="pf-c-dropdown__menu-item pf-m-disabled"
4593
+ href="#"
4594
+ aria-disabled="true"
4595
+ tabindex="-1"
4596
+ >Disabled link</a>
4597
+ </li>
4598
+ <li>
4599
+ <button
4600
+ class="pf-c-dropdown__menu-item"
4601
+ type="button"
4602
+ disabled
4603
+ >Disabled action</button>
4604
+ </li>
4605
+ <li class="pf-c-divider" role="separator"></li>
4606
+ <li>
4607
+ <a
4608
+ class="pf-c-dropdown__menu-item"
4609
+ href="#"
4610
+ >Separated link</a>
4611
+ </li>
4612
+ </ul>
4613
+ </div>
4614
+ </td>
4615
+ </tr>
4616
+
4617
+ <tr class="pf-c-table__expandable-row" role="row">
4618
+ <td
4619
+ class
4620
+ role="cell"
4621
+ colspan="9"
4622
+ id="expandable-demo-table-content3"
4623
+ >
4624
+ <div class="pf-c-table__expandable-row-content">
4625
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
4626
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
4627
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
4628
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
4629
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
4630
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
4631
+ </div>
4632
+ </td>
4633
+ </tr>
4634
+ </tbody>
4635
+
4636
+ <tbody role="rowgroup">
4637
+ <tr role="row">
4638
+ <td class="pf-c-table__toggle" role="cell">
4639
+ <button
4640
+ class="pf-c-button pf-m-plain"
4641
+ aria-labelledby="expandable-demo-table-node4 expandable-toggle4"
4642
+ id="expandable-toggle4"
4643
+ aria-label="Details"
4644
+ aria-controls="expandable-demo-table-content4"
4645
+ >
4646
+ <div class="pf-c-table__toggle-icon">
4647
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
4648
+ </div>
4649
+ </button>
4650
+ </td>
4651
+
4652
+ <td class="pf-c-table__check" role="cell">
4653
+ <input
4654
+ type="checkbox"
4655
+ name="checkrow4"
4656
+ aria-labelledby="expandable-demo-table-node4"
4657
+ />
4658
+ </td>
4659
+ <th role="columnheader" data-label="Repository name">
4660
+ <div>
4661
+ <div id="expandable-demo-table-node4">Node 4</div>
4662
+ <a href="#">siemur/test-space</a>
4663
+ </div>
4664
+ </th>
4665
+ <td role="cell" data-label="Branches">
4666
+ <span>
4667
+ <i class="fas fa-code-branch"></i> 10
4668
+ </span>
4669
+ </td>
4670
+ <td role="cell" data-label="Pull requests">
4671
+ <span>
4672
+ <i class="fas fa-code"></i> 25
4673
+ </span>
4674
+ </td>
4675
+ <td role="cell" data-label="Work spaces">
4676
+ <span>
4677
+ <i class="fas fa-cube"></i> 5
4678
+ </span>
4679
+ </td>
4680
+ <td role="cell" data-label="Last commit">2 days ago</td>
4681
+ <td role="cell" data-label="Action">
4682
+ <a href="#">Action link</a>
4683
+ </td>
4684
+ <td class="pf-c-table__action" role="cell">
4685
+ <div class="pf-c-dropdown">
4686
+ <button
4687
+ class="pf-c-dropdown__toggle pf-m-plain"
4688
+ id="expandable-demo-table-dropdown-kebab-5-button"
4689
+ aria-expanded="false"
4690
+ type="button"
4691
+ aria-label="Actions"
4692
+ >
4693
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4694
+ </button>
4695
+ <ul
4696
+ class="pf-c-dropdown__menu pf-m-align-right"
4697
+ aria-labelledby="expandable-demo-table-dropdown-kebab-5-button"
4698
+ hidden
4699
+ >
4700
+ <li>
4701
+ <a class="pf-c-dropdown__menu-item" href="#">Link</a>
4702
+ </li>
4703
+ <li>
4704
+ <button
4705
+ class="pf-c-dropdown__menu-item"
4706
+ type="button"
4707
+ >Action</button>
4708
+ </li>
4709
+ <li>
4710
+ <a
4711
+ class="pf-c-dropdown__menu-item pf-m-disabled"
4712
+ href="#"
4713
+ aria-disabled="true"
4714
+ tabindex="-1"
4715
+ >Disabled link</a>
4716
+ </li>
4717
+ <li>
4718
+ <button
4719
+ class="pf-c-dropdown__menu-item"
4720
+ type="button"
4721
+ disabled
4722
+ >Disabled action</button>
4723
+ </li>
4724
+ <li class="pf-c-divider" role="separator"></li>
4725
+ <li>
4726
+ <a
4727
+ class="pf-c-dropdown__menu-item"
4728
+ href="#"
4729
+ >Separated link</a>
4730
+ </li>
4731
+ </ul>
4732
+ </div>
4733
+ </td>
4734
+ </tr>
4735
+
4736
+ <tr class="pf-c-table__expandable-row" role="row">
4737
+ <td
4738
+ class
4739
+ role="cell"
4740
+ colspan="9"
4741
+ id="expandable-demo-table-content4"
4742
+ >
4743
+ <div class="pf-c-table__expandable-row-content">
4744
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
4745
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
4746
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
4747
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
4748
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
4749
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
4750
+ </div>
4751
+ </td>
4752
+ </tr>
4753
+ </tbody>
4754
+
4755
+ <tbody role="rowgroup">
4756
+ <tr role="row">
4757
+ <td class="pf-c-table__toggle" role="cell">
4758
+ <button
4759
+ class="pf-c-button pf-m-plain"
4760
+ aria-labelledby="expandable-demo-table-node5 expandable-toggle5"
4761
+ id="expandable-toggle5"
4762
+ aria-label="Details"
4763
+ aria-controls="expandable-demo-table-content5"
4764
+ >
4765
+ <div class="pf-c-table__toggle-icon">
4766
+ <i class="fas fa-angle-down" aria-hidden="true"></i>
4767
+ </div>
4768
+ </button>
4769
+ </td>
4770
+
4771
+ <td class="pf-c-table__check" role="cell">
4772
+ <input
4773
+ type="checkbox"
4774
+ name="checkrow5"
4775
+ aria-labelledby="expandable-demo-table-node5"
4776
+ />
4777
+ </td>
4778
+ <td role="cell" data-label="Repository name">
4779
+ <div>
4780
+ <div id="expandable-demo-table-node5">Node 5</div>
4781
+ <a href="#">siemur/test-space</a>
4782
+ </div>
4783
+ </td>
4784
+ <td role="cell" data-label="Branches">
4785
+ <span>
4786
+ <i class="fas fa-code-branch"></i> 10
4787
+ </span>
4788
+ </td>
4789
+ <td role="cell" data-label="Pull requests">
4790
+ <span>
4791
+ <i class="fas fa-code"></i> 25
4792
+ </span>
4793
+ </td>
4794
+ <td role="cell" data-label="Work spaces">
4795
+ <span>
4796
+ <i class="fas fa-cube"></i> 5
4797
+ </span>
4798
+ </td>
4799
+ <td role="cell" data-label="Last commit">2 days ago</td>
4800
+ <td role="cell" data-label="Action">
4801
+ <a href="#">Action link</a>
4802
+ </td>
4803
+ <td class="pf-c-table__action" role="cell">
4804
+ <div class="pf-c-dropdown">
4805
+ <button
4806
+ class="pf-c-dropdown__toggle pf-m-plain"
4807
+ id="expandable-demo-table-dropdown-kebab-6-button"
4808
+ aria-expanded="false"
4809
+ type="button"
4810
+ aria-label="Actions"
4811
+ >
4812
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
4813
+ </button>
4814
+ <ul
4815
+ class="pf-c-dropdown__menu pf-m-align-right"
4816
+ aria-labelledby="expandable-demo-table-dropdown-kebab-6-button"
4817
+ hidden
4818
+ >
4819
+ <li>
4820
+ <a class="pf-c-dropdown__menu-item" href="#">Link</a>
4821
+ </li>
4822
+ <li>
4823
+ <button
4824
+ class="pf-c-dropdown__menu-item"
4825
+ type="button"
4826
+ >Action</button>
4827
+ </li>
4828
+ <li>
4829
+ <a
4830
+ class="pf-c-dropdown__menu-item pf-m-disabled"
4831
+ href="#"
4832
+ aria-disabled="true"
4833
+ tabindex="-1"
4834
+ >Disabled link</a>
4835
+ </li>
4836
+ <li>
4837
+ <button
4838
+ class="pf-c-dropdown__menu-item"
4839
+ type="button"
4840
+ disabled
4841
+ >Disabled action</button>
4842
+ </li>
4843
+ <li class="pf-c-divider" role="separator"></li>
4844
+ <li>
4845
+ <a
4846
+ class="pf-c-dropdown__menu-item"
4847
+ href="#"
4848
+ >Separated link</a>
4849
+ </li>
4850
+ </ul>
4851
+ </div>
4852
+ </td>
4853
+ </tr>
4854
+
4855
+ <tr class="pf-c-table__expandable-row" role="row">
4856
+ <td
4857
+ class
4858
+ role="cell"
4859
+ colspan="9"
4860
+ id="expandable-demo-table-content5"
4861
+ >
4862
+ <div class="pf-c-table__expandable-row-content">
4863
+ Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
4864
+ tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
4865
+ quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
4866
+ consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
4867
+ cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
4868
+ proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
4869
+ </div>
4870
+ </td>
4871
+ </tr>
4872
+ </tbody>
4873
+ </table>
4874
+ <div class="pf-c-pagination pf-m-bottom">
4875
+ <div class="pf-c-options-menu pf-m-top">
4876
+ <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain">
4877
+ <span class="pf-c-options-menu__toggle-text">
4878
+ <b>1 - 10</b>&nbsp;of&nbsp;
4879
+ <b>36</b>
4880
+ </span>
4881
+ <button
4882
+ class="pf-c-options-menu__toggle-button"
4883
+ id="{{page--id}}-pagination-options-menu-bottom-example-toggle"
4884
+ aria-haspopup="listbox"
4885
+ aria-expanded="false"
4886
+ aria-label="Items per page"
4887
+ >
4888
+ <span class="pf-c-options-menu__toggle-button-icon">
4889
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
4890
+ </span>
4891
+ </button>
3814
4892
  </div>
4893
+ <ul
4894
+ class="pf-c-options-menu__menu pf-m-top"
4895
+ aria-labelledby="{{page--id}}-pagination-options-menu-bottom-example-toggle"
4896
+ hidden
4897
+ >
4898
+ <li>
4899
+ <button
4900
+ class="pf-c-options-menu__menu-item"
4901
+ type="button"
4902
+ >5 per page</button>
4903
+ </li>
4904
+ <li>
4905
+ <button class="pf-c-options-menu__menu-item" type="button">
4906
+ 10 per page
4907
+ <div class="pf-c-options-menu__menu-item-icon">
4908
+ <i class="fas fa-check" aria-hidden="true"></i>
4909
+ </div>
4910
+ </button>
4911
+ </li>
4912
+ <li>
4913
+ <button
4914
+ class="pf-c-options-menu__menu-item"
4915
+ type="button"
4916
+ >20 per page</button>
4917
+ </li>
4918
+ </ul>
3815
4919
  </div>
3816
- <div class="pf-l-gallery__item">
3817
- <div class="pf-c-card">
3818
- <div class="pf-c-card__body">This is a card</div>
4920
+ <nav class="pf-c-pagination__nav" aria-label="Pagination">
4921
+ <div class="pf-c-pagination__nav-control pf-m-first">
4922
+ <button
4923
+ class="pf-c-button pf-m-plain"
4924
+ type="button"
4925
+ disabled
4926
+ aria-label="Go to first page"
4927
+ >
4928
+ <i class="fas fa-angle-double-left" aria-hidden="true"></i>
4929
+ </button>
3819
4930
  </div>
3820
- </div>
3821
- <div class="pf-l-gallery__item">
3822
- <div class="pf-c-card">
3823
- <div class="pf-c-card__body">This is a card</div>
4931
+ <div class="pf-c-pagination__nav-control pf-m-prev">
4932
+ <button
4933
+ class="pf-c-button pf-m-plain"
4934
+ type="button"
4935
+ disabled
4936
+ aria-label="Go to previous page"
4937
+ >
4938
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
4939
+ </button>
3824
4940
  </div>
3825
- </div>
3826
- <div class="pf-l-gallery__item">
3827
- <div class="pf-c-card">
3828
- <div class="pf-c-card__body">This is a card</div>
4941
+ <div class="pf-c-pagination__nav-page-select">
4942
+ <input
4943
+ class="pf-c-form-control"
4944
+ aria-label="Current page"
4945
+ type="number"
4946
+ min="1"
4947
+ max="4"
4948
+ value="1"
4949
+ />
4950
+ <span aria-hidden="true">of 4</span>
3829
4951
  </div>
3830
- </div>
3831
- <div class="pf-l-gallery__item">
3832
- <div class="pf-c-card">
3833
- <div class="pf-c-card__body">This is a card</div>
4952
+ <div class="pf-c-pagination__nav-control pf-m-next">
4953
+ <button
4954
+ class="pf-c-button pf-m-plain"
4955
+ type="button"
4956
+ aria-label="Go to next page"
4957
+ >
4958
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
4959
+ </button>
3834
4960
  </div>
3835
- </div>
3836
- <div class="pf-l-gallery__item">
3837
- <div class="pf-c-card">
3838
- <div class="pf-c-card__body">This is a card</div>
4961
+ <div class="pf-c-pagination__nav-control pf-m-last">
4962
+ <button
4963
+ class="pf-c-button pf-m-plain"
4964
+ type="button"
4965
+ aria-label="Go to last page"
4966
+ >
4967
+ <i class="fas fa-angle-double-right" aria-hidden="true"></i>
4968
+ </button>
3839
4969
  </div>
3840
- </div>
4970
+ </nav>
3841
4971
  </div>
3842
4972
  </div>
3843
4973
  </section>