testio-tailwind 3.20.5 → 3.22.0

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 (137) hide show
  1. package/AI_DESIGN_SYSTEM_REFERENCE.md +2407 -0
  2. package/package.json +2 -1
  3. package/src/_data/navigation.json +4 -0
  4. package/src/_includes/header.njk +8 -8
  5. package/src/_includes/page-with-sidebar.njk +10 -1
  6. package/src/assets/scripts/app.js +43 -0
  7. package/src/assets/stylesheets/app.css +2 -0
  8. package/src/assets/stylesheets/components/designsystem/designsystem-styles.css +4 -2
  9. package/src/assets/stylesheets/components/forms.css +19 -11
  10. package/src/assets/stylesheets/components/tables.css +4 -0
  11. package/src/assets/stylesheets/plugin_themes/flatpickr.css +86 -0
  12. package/src/pages/buttons/block.haml +1 -0
  13. package/src/pages/buttons/button_group.haml +1 -0
  14. package/src/pages/buttons/buttons-lg.haml +1 -0
  15. package/src/pages/buttons/buttons-round.haml +1 -0
  16. package/src/pages/buttons/buttons-sm.haml +1 -0
  17. package/src/pages/buttons/buttons-xl.haml +1 -0
  18. package/src/pages/buttons/buttons.haml +1 -0
  19. package/src/pages/buttons/buttons_input.haml +4 -0
  20. package/src/pages/buttons/dropdown-menu.haml +2 -11
  21. package/src/pages/buttons/square-buttons.haml +15 -0
  22. package/src/pages/components/alerts.haml +1 -0
  23. package/src/pages/components/banner_cards.haml +1 -0
  24. package/src/pages/components/card_badges.haml +8 -7
  25. package/src/pages/components/cards.haml +15 -22
  26. package/src/pages/components/cards_customer.haml +1 -0
  27. package/src/pages/components/cards_fixedwidth.haml +7 -0
  28. package/src/pages/components/cards_iconheader.haml +1 -0
  29. package/src/pages/components/cards_tester.haml +1 -0
  30. package/src/pages/components/descriptionlist.haml +12 -3
  31. package/src/pages/components/devices.haml +1 -0
  32. package/src/pages/components/drawer.haml +1 -0
  33. package/src/pages/components/drawer_filter.haml +1 -0
  34. package/src/pages/components/emptystate.haml +2 -0
  35. package/src/pages/{buttons → components}/info_popover.haml +2 -1
  36. package/src/pages/components/listitem_with_actionbar.haml +1 -0
  37. package/src/pages/components/listitem_with_footer.haml +1 -0
  38. package/src/pages/components/listitems.haml +1 -0
  39. package/src/pages/components/listitems_badge.haml +1 -0
  40. package/src/pages/components/listitems_collapsable.haml +1 -0
  41. package/src/pages/components/listitems_nested.haml +1 -0
  42. package/src/pages/components/listitems_selectable.haml +1 -0
  43. package/src/pages/components/loading_spinner.haml +1 -0
  44. package/src/pages/components/metasidebar.haml +1 -0
  45. package/src/pages/components/modal_details.haml +3 -1
  46. package/src/pages/components/notifications.haml +2 -1
  47. package/src/pages/components/user_item.haml +1 -0
  48. package/src/pages/forms/attachments.pug +71 -0
  49. package/src/pages/forms/checkboxes.haml +1 -0
  50. package/src/pages/forms/checkboxes_devices.haml +1 -0
  51. package/src/pages/forms/date-time.haml +24 -0
  52. package/src/pages/forms/dropzone.pug +38 -0
  53. package/src/pages/forms/flatpickr.haml +27 -0
  54. package/src/pages/forms/form-addon.haml +1 -0
  55. package/src/pages/forms/form-card.haml +1 -0
  56. package/src/pages/forms/form_grid.haml +1 -0
  57. package/src/pages/forms/form_hint.haml +1 -0
  58. package/src/pages/forms/forms.haml +1 -0
  59. package/src/pages/forms/radiobuttons.haml +1 -0
  60. package/src/pages/forms/rating_scale.haml +1 -0
  61. package/src/pages/forms/search.haml +1 -0
  62. package/src/pages/forms/selectable_token.haml +1 -0
  63. package/src/pages/forms/selectable_token_browsers.haml +1 -0
  64. package/src/pages/forms/selectable_token_lg.haml +1 -0
  65. package/src/pages/forms/selectable_token_xl.haml +1 -0
  66. package/src/pages/forms/textarea.haml +4 -0
  67. package/src/pages/forms/toggle-buttons.haml +1 -0
  68. package/src/pages/forms/toggle-switch.haml +1 -0
  69. package/src/pages/forms/trix_editor.pug +1 -0
  70. package/src/pages/icons/bug-icons.haml +1 -0
  71. package/src/pages/icons/index.njk +18 -14
  72. package/src/pages/icons/status-icons.haml +1 -0
  73. package/src/pages/layout/app_layout.haml +2 -0
  74. package/src/pages/layout/margins.haml +1 -0
  75. package/src/pages/layout/max_width.haml +2 -1
  76. package/src/pages/layout/paddings.haml +1 -0
  77. package/src/pages/layout/spacing.haml +1 -0
  78. package/src/pages/{examples → layouts}/agenticqa_splitview.haml +1 -1
  79. package/src/pages/layouts/layout-actionbar.haml +45 -0
  80. package/src/pages/{examples → layouts}/layout-basic.haml +3 -2
  81. package/src/pages/{examples → layouts}/layout-chat.haml +3 -2
  82. package/src/pages/{examples/layout-sidebar-actionbar-metasidebar.haml → layouts/layout-chatwindow.haml} +3 -2
  83. package/src/pages/{examples → layouts}/layout-customer.haml +3 -2
  84. package/src/pages/{examples → layouts}/layout-form-sidebar-actionbar-metasidebar.haml +5 -228
  85. package/src/pages/{examples → layouts}/layout-manager.haml +3 -2
  86. package/src/pages/{examples → layouts}/layout-metasidebar.haml +3 -2
  87. package/src/pages/{examples → layouts}/layout-sidebar.haml +3 -2
  88. package/src/pages/{examples → layouts}/layout-tester.haml +3 -2
  89. package/src/pages/{examples → layouts}/splitview-metasidebar.haml +3 -3
  90. package/src/pages/{examples → layouts}/splitview-testcases.haml +2 -2
  91. package/src/pages/{examples → layouts}/splitview.haml +3 -3
  92. package/src/pages/navigation/header-manager.haml +1 -0
  93. package/src/pages/navigation/header-tester.haml +1 -0
  94. package/src/pages/navigation/header.haml +1 -0
  95. package/src/pages/navigation/header_customer.haml +1 -0
  96. package/src/pages/navigation/header_tester_epam.haml +1 -0
  97. package/src/pages/navigation/product_dropdown.haml +2 -0
  98. package/src/pages/navigation/radio_tabs.haml +1 -0
  99. package/src/pages/navigation/sidebar-manager.haml +2 -1
  100. package/src/pages/navigation/sidebar-tester-elements.haml +1 -0
  101. package/src/pages/navigation/sidebar-tester-seatlimitation.haml +1 -1
  102. package/src/pages/navigation/sidebar-tester.haml +1 -1
  103. package/src/pages/navigation/sidebar.haml +1 -0
  104. package/src/pages/navigation/sidebar_collapsables.haml +1 -0
  105. package/src/pages/navigation/sidebar_customer.haml +1 -0
  106. package/src/pages/navigation/tabnavigation.haml +1 -0
  107. package/src/pages/navigation/tabnavigation_actions.haml +1 -0
  108. package/src/pages/navigation/tabnavigation_pills.haml +1 -0
  109. package/src/pages/navigation/tabnavigation_sm.haml +1 -0
  110. package/src/pages/navigation/test-header-tester.haml +2 -0
  111. package/src/pages/tables/index.njk +7 -0
  112. package/src/pages/tables/tables-cellstyle.haml +38 -0
  113. package/src/pages/tables/tables-grid.haml +31 -0
  114. package/src/pages/tables/tables.haml +16 -0
  115. package/src/pages/tables/tables_alternating.haml +27 -0
  116. package/src/pages/tables/tables_borders.haml +22 -0
  117. package/src/pages/tables/tables_cells.haml +50 -0
  118. package/src/pages/tables/tables_footer.haml +27 -0
  119. package/src/pages/tables/tables_formrow.haml +31 -0
  120. package/src/pages/tables/tables_header.haml +22 -0
  121. package/src/pages/{components → tables}/tables_linked.haml +11 -10
  122. package/src/pages/typography/link_with_icon.haml +10 -2
  123. package/src/pages/typography/linked_icon.haml +6 -0
  124. package/src/pages/typography/section_header.haml +1 -0
  125. package/src/pages/typography/section_header_actions.haml +1 -0
  126. package/src/pages/typography/text_with_icon.haml +3 -2
  127. package/utils/filters.js +161 -0
  128. package/CLAUDE_DESIGN_SYSTEM_REFERENCE.md +0 -1978
  129. package/src/pages/buttons/link-with-icon.haml +0 -13
  130. package/src/pages/components/tables-cellstyle.pug +0 -285
  131. package/src/pages/components/tables-grid.pug +0 -258
  132. package/src/pages/components/tables.haml +0 -57
  133. package/src/pages/components/tables_cells.pug +0 -57
  134. package/src/pages/components/tables_formrow.haml +0 -55
  135. package/src/pages/examples/layout-actionbar.haml +0 -268
  136. package/src/pages/examples/layout-sidebar-actionbar.haml +0 -308
  137. package/src/pages/forms/uploads.pug +0 -101
@@ -1,13 +0,0 @@
1
- ---
2
- title: Link with Icon
3
- tags: button
4
- ---
5
-
6
- .grid.grid-cols-auto.gap-2
7
- %a.link-with-icon{href:""}
8
- %span.icon.icon-filter.mr-icon-spacing
9
- Filter
10
- %a.link-with-icon{href:""}
11
- %span.icon.icon-clock.mr-icon-spacing
12
- All Time
13
-
@@ -1,285 +0,0 @@
1
- ---
2
- tags: ['components']
3
- title: Tables - Cell style
4
- ---
5
-
6
- .space-y-5
7
-
8
- .overflow-x-auto
9
- table.table-standard.table-cellstyle
10
- thead
11
- tr
12
- th Key
13
- th
14
- .language-code.sm.mr-icon-spacing.text-language-source CD-SM
15
- span Source
16
- th.missing
17
- .language-code.sm.mr-icon-spacing.text-language-target DE
18
- span German
19
- th.inprogress
20
- .language-code.sm.mr-icon-spacing.text-language-target FR
21
- span French
22
- th.completed
23
- .language-code.sm.mr-icon-spacing.text-language-target UK
24
- span Ukrainian
25
- th
26
- .inline-block.icon.icon-cloud-upload.mr-icon-spacing
27
- span Export to
28
-
29
- tbody
30
- tr
31
- td Key
32
- td Text to translate
33
- td Text zur Übersetzung
34
- td Texte à traduire
35
- td.completed текст для перекладу
36
- td my-file.yaml
37
- tr
38
- td Key
39
- td.wrap
40
- | Add
41
- code.bg-tag .wrap
42
- | to allow line breaks within a cell.
43
- | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
44
- td.missing Missing
45
- td.inprogress In progress
46
- td.completed Completed
47
- td my-file.yaml
48
- tr
49
- td Key
50
- td Text to translate
51
- td.missing Missing
52
- td.inprogress In progress
53
- td.completed Completed
54
- td my-file.yaml
55
-
56
-
57
- h2.pt-5 Table cellstyle with checkboxes
58
-
59
- .overflow-x-auto
60
- table.table-standard.table-cellstyle
61
- thead
62
- tr
63
- th Key
64
- th
65
- .language-code.sm.mr-icon-spacing.text-language-source CD-SM
66
- span Source
67
- th.missing
68
- .form-check.sm
69
- input#checkde1(type='checkbox')
70
- label(for='checkde1')
71
- .language-code.sm.mr-icon-spacing.text-language-target DE
72
- span German
73
- th.inprogress
74
- .form-check.sm
75
- input#checkfr1(type='checkbox')
76
- label(for='checkfr1')
77
- .language-code.sm.mr-icon-spacing.text-language-target FR
78
- span French
79
- th.completed
80
- .form-check.sm
81
- input#checkuk1(type='checkbox')
82
- label(for='checkuk1')
83
- .language-code.sm.mr-icon-spacing.text-language-target UK
84
- span Ukrainian
85
- th
86
- .inline-block.icon.icon-cloud-upload.mr-icon-spacing
87
- span Export to
88
-
89
- tbody
90
- tr
91
- td Key
92
- td Text to translate
93
- td
94
- .form-check.sm
95
- input#checkde2(type='checkbox')
96
- label(for='checkde2') Text zur Übersetzung
97
- td
98
- .form-check.sm
99
- input#checkfr2(type='checkbox')
100
- label(for='checkfr2') Texte à traduire
101
- td.completed
102
- .form-check.sm
103
- input#checkuk2(type='checkbox')
104
- label(for='checkuk2') текст для перекладу
105
- td my-file.yaml
106
- tr
107
- td Key
108
- td Text to translate
109
- td.missing
110
- .form-check.sm
111
- input#checkde3(type='checkbox')
112
- label(for='checkde3') Missing
113
- td.inprogress
114
- .form-check.sm
115
- input#checkfr3(type='checkbox')
116
- label(for='checkfr3') In progress
117
- td.completed
118
- .form-check.sm
119
- input#checkuk3(type='checkbox')
120
- label(for='checkuk3') Completed
121
- td my-file.yaml
122
- tr
123
- td Key
124
- td Text to translate
125
- td.missing
126
- .form-check.sm
127
- input#checkde4(type='checkbox')
128
- label(for='checkde4') Missing
129
- td.inprogress
130
- .form-check.sm
131
- input#checkfr4(type='checkbox')
132
- label(for='checkfr4') In progress
133
- td.completed
134
- .form-check.sm
135
- input#checkuk4(type='checkbox')
136
- label(for='checkuk4') Completed
137
- td my-file.yaml
138
- tr
139
- td Key
140
- td Text to translate
141
- td
142
- .form-check.sm
143
- input#checkde5(type='checkbox', checked='')
144
- label(for='checkde5') Text zur Übersetzung
145
- td
146
- .form-check.sm
147
- input#checkfr5(type='checkbox', checked='')
148
- label(for='checkfr5') Texte à traduire
149
- td.completed
150
- .form-check.sm
151
- input#checkuk5(type='checkbox', checked='')
152
- label(for='checkuk5') текст для перекладу
153
- td my-file.yaml
154
- tr
155
- td Key
156
- td Text to translate
157
- td.missing
158
- .form-check.sm
159
- input#checkde6(type='checkbox', checked='')
160
- label(for='checkde6') Missing
161
- td.inprogress
162
- .form-check.sm
163
- input#checkfr6(type='checkbox', checked='')
164
- label(for='checkfr6') In progress
165
- td.completed
166
- .form-check.sm
167
- input#checkuk6(type='checkbox', checked='')
168
- label(for='checkuk6') Completed
169
- td my-file.yaml
170
-
171
- h2.pt-5 Table cellstyle with editable cells
172
-
173
- .overflow-x-auto
174
- table.table-standard.table-cellstyle
175
- thead
176
- tr
177
- th Key
178
- th
179
- .language-code.sm.mr-icon-spacing.text-language-source CD-SM
180
- span Source
181
- th.missing
182
- .language-code.sm.mr-icon-spacing.text-language-target DE
183
- span German
184
- th.inprogress
185
- .language-code.sm.mr-icon-spacing.text-language-target FR
186
- span French
187
-
188
- tbody
189
- tr
190
- td Key
191
- td.cell-editable
192
- .cell-content-editable Text to translate
193
- td.cell-editable
194
- .cell-content-editable Text zur Übersetzung
195
- td.cell-editable
196
- .cell-edit-state
197
- form.edit-form
198
- textarea(rows="1")
199
- | The height of this textarea grows with its content
200
- .cell-actions
201
- button.btn.btn-success.white(name='button', type='submit')
202
- .icon.icon-sm.icon-check-circle-filled
203
- a.btn.btn-danger(href='#')
204
- .icon.icon-sm.icon-cross-circle-filled
205
- tr
206
- td Key
207
- td.wrap.cell-editable
208
- .cell-content-editable
209
- p
210
- | Add
211
- code.bg-tag .wrap
212
- | to allow line breaks within a cell.
213
- | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
214
- td.missing.cell-editable.wrap
215
- a.cell-content-editable ## En-tête ## **Bold** *italic* > quelques citations 1. Élément de la liste 2. Élément de la liste ![entrer la description de l'image ici][1] [1] : https://eu-images.contentstack.com/v3/assets/bltd7ba2d79b5449a0e/blt14d22b920d2f1fb2/63d1080ea8a9cb64655f0a65/cslogo.png?branch=test
216
- td.inprogress.cell-editable
217
- .cell-edit-state
218
- form.edit-form
219
- textarea(rows="1")
220
- | The height of this textarea grows with its content
221
- .cell-actions
222
- button.btn.btn-success.white(name='button', type='submit')
223
- .icon.icon-sm.icon-check-circle-filled
224
- a.btn.btn-danger(href='#')
225
- .icon.icon-sm.icon-cross-circle-filled
226
- tr
227
- td Key
228
- td.cell-editable
229
- .cell-content-editable Text to translate
230
- td.missing.cell-editable
231
- .cell-content-editable Missing
232
- td.inprogress.cell-editable
233
- .cell-content-editable In progress
234
-
235
-
236
- h2.pt-5 With action column at the end
237
- .overflow-x-auto
238
- table.table-standard.table-cellstyle
239
- thead
240
- tr
241
- th ID
242
- th Name
243
- th Roles
244
- th Language
245
- th Status
246
- th
247
-
248
- tbody
249
- tr
250
- td #123321
251
- td.cell-full-width Master Translator
252
- td.tags
253
- span.tag Candidate
254
- td Check
255
- td Check
256
- td.action-cell
257
- .btn.btn-sm.btn-primary
258
- .icon.icon-review.mr-icon-spacing
259
- | Review
260
- .btn.btn-sm.btn-primary
261
- .icon.icon-pencil.mr-icon-spacing
262
- | Edit
263
- tr
264
- td #123321
265
- td.cell-full-width Master Translator
266
- td.tags
267
- span.tag Candidate
268
- td Check
269
- td Check
270
- td.action-cell
271
- .btn.btn-sm.btn-primary
272
- .icon.icon-pencil.mr-icon-spacing
273
- | Edit
274
- tr
275
- td #123321
276
- td.cell-full-width Master Translator
277
- td.tags
278
- span.tag Candidate
279
- span.tag Another tag
280
- td Check
281
- td Check
282
- td.action-cell
283
- .btn.btn-sm.btn-primary
284
- .icon.icon-pencil.mr-icon-spacing
285
- | Edit
@@ -1,258 +0,0 @@
1
- ---
2
- tags: ['components']
3
- title: Tables - Grid
4
- ---
5
-
6
- .space-y-5
7
- p
8
- | You need to set inline styles with the number of columns: <code class="bg-tag">grid-template-columns: repeat({NUMBER OF COLUMNS}, minmax(12rem, 1fr));</code>
9
- <br>
10
- | Example: <code class="bg-tag">grid-template-columns: repeat(6, minmax(12rem, 1fr));</code>
11
- .overflow-x-auto
12
- table.table-standard.table-cellstyle.table-grid(style="grid-template-columns: repeat(6, minmax(12rem, 1fr));")
13
- thead
14
- tr
15
- th Key
16
- th
17
- .language-code.sm.mr-icon-spacing.text-language-source CD-SM
18
- span Source
19
- th.missing
20
- .language-code.sm.mr-icon-spacing.text-language-target DE
21
- span German
22
- th.inprogress
23
- .language-code.sm.mr-icon-spacing.text-language-target FR
24
- span French
25
- th.completed
26
- .language-code.sm.mr-icon-spacing.text-language-target UK
27
- span Ukrainian
28
- th
29
- .inline-block.icon.icon-cloud-upload.mr-icon-spacing
30
- span Export to
31
-
32
- tbody
33
- tr
34
- td Key
35
- td Text to translate with some extra lorem ipsum
36
- td Text zur Übersetzung mit etwas extra lorem ipsum
37
- td Texte à traduire avec un petit lorem ipsum
38
- td.completed текст для перекладу lorem ipsum
39
- td my-file.yaml
40
- tr
41
- td Key
42
- td
43
- | No need to add anything
44
- | to allow line breaks within a cell. It wraps automatically.
45
- | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
46
- td.missing Missing
47
- td.inprogress In progress
48
- td.completed Completed
49
- td my-file.yaml
50
- tr
51
- td.pre
52
- | Add
53
- code.bg-tag .pre
54
- | to show preformatted white space.
55
- | Multi
56
- | Line
57
- | textbox
58
- | Cat and dog
59
- td Text to translate
60
- td.missing Missing
61
- td.inprogress In progress
62
- td.completed Completed
63
- td my-file.yaml
64
-
65
-
66
- h2.pt-5 Table cellstyle, grid, with checkboxes
67
- p
68
- | You need to set inline styles with the number of columns: <code class="bg-tag">grid-template-columns: repeat({NUMBER OF COLUMNS}, minmax(12rem, 1fr));</code>
69
- <br>
70
- | Example: <code class="bg-tag">grid-template-columns: repeat(6, minmax(12rem, 1fr));</code>
71
- .overflow-x-auto
72
- table.table-standard.table-cellstyle.table-grid(style="grid-template-columns: repeat(6, minmax(12rem, 1fr));")
73
- thead
74
- tr
75
- th Key
76
- th
77
- .language-code.sm.mr-icon-spacing.text-language-source CD-SM
78
- span Source
79
- th.missing
80
- .form-check.sm
81
- input#checkde1grid(type='checkbox')
82
- label(for='checkde1grid')
83
- .language-code.sm.mr-icon-spacing.text-language-target DE
84
- span German
85
- th.inprogress
86
- .form-check.sm
87
- input#checkfr1grid(type='checkbox')
88
- label(for='checkfr1grid')
89
- .language-code.sm.mr-icon-spacing.text-language-target FR
90
- span French
91
- th.completed
92
- .form-check.sm
93
- input#checkuk1grid(type='checkbox')
94
- label(for='checkuk1grid')
95
- .language-code.sm.mr-icon-spacing.text-language-target UK
96
- span Ukrainian
97
- th
98
- .inline-block.icon.icon-cloud-upload.mr-icon-spacing
99
- span Export to
100
-
101
- tbody
102
- tr
103
- td Key
104
- td Text to translate with some extra lorem ipsum
105
- td
106
- .form-check.sm
107
- input#checkde2grid(type='checkbox')
108
- label(for='checkde2grid') Text zur Übersetzung mit etwas extra lorem ipsum
109
- td
110
- .form-check.sm
111
- input#checkfr2grid(type='checkbox')
112
- label(for='checkfr2grid') Texte à traduire avec un petit lorem ipsum
113
- td.completed
114
- .form-check.sm
115
- input#checkuk2grid(type='checkbox')
116
- label(for='checkuk2grid') текст для перекладу lorem ipsum
117
- td my-file.yaml
118
- tr
119
- td Key
120
- td Text to translate
121
- td.missing
122
- .form-check.sm
123
- input#checkde3grid(type='checkbox')
124
- label(for='checkde3grid') Missing
125
- td.inprogress
126
- .form-check.sm
127
- input#checkfr3grid(type='checkbox')
128
- label(for='checkfr3grid') In progress
129
- td.completed
130
- .form-check.sm
131
- input#checkuk3grid(type='checkbox')
132
- label(for='checkuk3grid') Completed
133
- td my-file.yaml
134
- tr
135
- td Key
136
- td Text to translate
137
- td.missing
138
- .form-check.sm
139
- input#checkde4grid(type='checkbox')
140
- label(for='checkde4grid') Missing
141
- td.inprogress
142
- .form-check.sm
143
- input#checkfr4grid(type='checkbox')
144
- label(for='checkfr4grid') In progress
145
- td.completed
146
- .form-check.sm
147
- input#checkuk4grid(type='checkbox')
148
- label(for='checkuk4grid') Completed
149
- td my-file.yaml
150
-
151
-
152
- h2.pt-5 Table cellstyle, grid, with editable cells
153
- p
154
- | You need to set inline styles with the number of columns: <code class="bg-tag">grid-template-columns: repeat({NUMBER OF COLUMNS}, minmax(12rem, 1fr));</code>
155
- <br>
156
- | Example: <code class="bg-tag">grid-template-columns: repeat(6, minmax(12rem, 1fr));</code>
157
-
158
- .overflow-x-auto
159
- table.table-standard.table-cellstyle.table-grid(style="grid-template-columns: repeat(6, minmax(12rem, 1fr));")
160
- thead
161
- tr
162
- th Key
163
- th
164
- .language-code.sm.mr-icon-spacing.text-language-source CD-SM
165
- span Source
166
- th
167
- .language-code.sm.mr-icon-spacing.text-language-target DE
168
- span German
169
- details.dropdown-actions.dropright.ml-auto
170
- summary
171
- a.link-with.icon
172
- span.icon.icon-xs.icon-menu
173
- .popover-menu(role='menu', aria-orientation='vertical', aria-labelledby='popover-menu')
174
- a.popover-action(href='#', role='menuitem')
175
- span.icon.icon-check-circle-filled.mr-icon-spacing
176
- | Popover action
177
-
178
- th
179
- .language-code.sm.mr-icon-spacing.text-language-target FR
180
- span French
181
- details.dropdown-actions.dropright.ml-auto
182
- summary
183
- a.link-with.icon
184
- span.icon.icon-xs.icon-menu
185
- .popover-menu(role='menu', aria-orientation='vertical', aria-labelledby='popover-menu')
186
- a.popover-action(href='#', role='menuitem')
187
- span.icon.icon-check-circle-filled.mr-icon-spacing
188
- | Popover action
189
-
190
- th
191
- .language-code.sm.mr-icon-spacing.text-language-target UK
192
- span Ukrainian
193
- details.dropdown-actions.dropright.ml-auto
194
- summary
195
- a.link-with.icon
196
- span.icon.icon-xs.icon-menu
197
- .popover-menu(role='menu', aria-orientation='vertical', aria-labelledby='popover-menu')
198
- a.popover-action(href='#', role='menuitem')
199
- span.icon.icon-check-circle-filled.mr-icon-spacing
200
- | Popover action
201
-
202
- th
203
- .inline-block.icon.icon-cloud-upload.mr-icon-spacing
204
- span Export to
205
-
206
- tbody
207
- tr
208
- td Key
209
- td.cell-editable
210
- .cell-content-editable Text to translate with some extra lorem ipsum
211
- td.cell-editable
212
- .cell-content-editable Text zur Übersetzung mit etwas extra lorem ipsum
213
- td.cell-editable
214
- .cell-content-editable Texte à traduire avec un petit lorem ipsum
215
- td.cell-editable
216
- form.cell-edit-state
217
- textarea(rows="1")
218
- | The height of this textarea grows with its content
219
- .cell-actions
220
- button.btn.btn-success.white(name='button', type='submit')
221
- .icon.icon-sm.icon-check-circle-filled
222
- a.btn.btn-danger(href='#')
223
- .icon.icon-sm.icon-cross-circle-filled
224
- td my-file.yaml
225
- tr
226
- td Key
227
- td.wrap.cell-editable
228
- .cell-content-editable
229
- | No need to add anything
230
- | to allow line breaks within a cell. It wraps automatically.
231
- | Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
232
- td.missing.cell-editable
233
- .cell-content-editable Missing
234
- td.inprogress.cell-editable
235
- form.cell-edit-state
236
- textarea(rows="1")
237
- | The height of this textarea grows with its content
238
- .cell-actions
239
- button.btn.btn-success.white(name='button', type='submit')
240
- .icon.icon-sm.icon-check-circle-filled
241
- a.btn.btn-danger(href='#')
242
- .icon.icon-sm.icon-cross-circle-filled
243
- td.completed.cell-editable
244
- .cell-content-editable Completed
245
- td my-file.yaml
246
- tr
247
- td Key
248
- td.wrap.cell-editable
249
- turbo-frame#paragraph_84054
250
- a.cell-content-editable(href='/customers/test_io/continuous_projects/1/paragraphs/84054/edit')
251
- | Marquer tous les documents comme &eacute;tant r&eacute;vis&eacute;s
252
- td.missing.cell-editable
253
- .cell-content-editable Missing
254
- td.inprogress.cell-editable
255
- .cell-content-editable In progress
256
- td.completed.cell-editable
257
- .cell-content-editable Completed
258
- td my-file.yaml
@@ -1,57 +0,0 @@
1
- ---
2
- tags: components
3
- title: Tables
4
- ---
5
-
6
- %h5.mb-heading Standard table
7
- %table.table
8
- %tr
9
- %td Cell content
10
- %td Cell content
11
- %td Cell content
12
- %tr
13
- %td Cell content Lorem ipsum dolor sit amet, consetetur sadipscing.
14
- %td Cell content
15
- %td.cell-with-buttons
16
- %button.btn.btn-primary action
17
-
18
- %h5.mb-heading Table with borders and alternating rows
19
- %table.table.table-bordered.table-striped
20
- %tr
21
- %td Cell content
22
- %td Cell content
23
- %td.cell-with-buttons
24
- %button.btn.btn-primary action
25
- %tr
26
- %td Cell content
27
- %td Cell content
28
- %td.cell-with-buttons
29
- %button.btn.btn-primary action
30
- %tr
31
- %td Cell content Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
32
- %td Cell content
33
- %td.cell-with-buttons
34
- %button.btn.btn-primary action
35
-
36
- %h5.mb-heading Table with header
37
- %table.table.table-bordered.table-striped
38
- %thead
39
- %th Table header
40
- %th Table header
41
- %th Table header
42
- %tbody
43
- %tr
44
- %td Cell content Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
45
- %td Cell content
46
- %td.cell-with-buttons
47
- %button.btn.btn-primary action
48
- %tr
49
- %td Cell content Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
50
- %td Cell content
51
- %td.cell-with-buttons
52
- %button.btn.btn-primary action
53
- %tr
54
- %td Cell content
55
- %td Cell content Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
56
- %td.cell-with-buttons
57
- %button.btn.btn-primary action
@@ -1,57 +0,0 @@
1
- ---
2
- tags: ['components']
3
- title: Table cells
4
- ---
5
-
6
- p.mb-heading
7
- | Using the class
8
- code.bg-tag.mx-xxs table-standard
9
- | enables more table cell behaviors.
10
-
11
- .space-y-10
12
-
13
- table.table-standard
14
- tbody
15
- tr
16
- td A cell with some lorem ipsum
17
- td Cell content
18
- td A small cell
19
- tr
20
- td This cell will take as much space as it's content
21
- td Cell content
22
- td The last cell will take up all the free space
23
-
24
- table.table-standard
25
- tbody
26
- tr
27
- td.cell-full-width
28
- | Add
29
- code.bg-tag .cell-full-width
30
- | to let a cell take all the available space.
31
- td.wrap.min-w-12
32
- | Add
33
- code.bg-tag .wrap
34
- | to allow line breaks within a cell.
35
- td Another cell content
36
- td € 40.00
37
- tr
38
- td.cell-full-width.pre
39
- | Add
40
- code.bg-tag .pre
41
- | to show preformatted white space.
42
- | Multi
43
- | Line
44
- | textbox
45
- | Cat and dog
46
- td.wrap.min-w-spacing-2xl
47
- | Wrapping cells need a
48
- code.bg-tag .min-w
49
- | rule to not be squished.
50
- td Another cell content
51
- td € 999.00
52
- tfoot
53
- tr
54
- td Table footer
55
- td Empty cell
56
- td Sum
57
- td € 999.00