superdesk-ui-framework 3.1.8 → 3.1.12

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 (89) hide show
  1. package/app/styles/_helpers.scss +913 -780
  2. package/app/styles/_master-desk.scss +2 -2
  3. package/app/styles/components/_sd-collapse-box.scss +113 -0
  4. package/app/styles/components/_subnav.scss +0 -1
  5. package/app/styles/design-tokens/_design-tokens-general.scss +19 -5
  6. package/app/styles/design-tokens/_new-colors.scss +11 -1
  7. package/app/styles/grids/_grid-layout.scss +0 -1
  8. package/app/styles/layout/_editor.scss +5 -5
  9. package/app-typescript/components/ToggleBox/CustomHeaderToggleBox.tsx +56 -0
  10. package/app-typescript/components/{Togglebox.tsx → ToggleBox/SimpleToggleBox.tsx} +3 -14
  11. package/app-typescript/components/ToggleBox/index.tsx +41 -0
  12. package/app-typescript/components/TreeMenu.tsx +4 -2
  13. package/app-typescript/index.ts +1 -1
  14. package/dist/components/Alerts.tsx +1 -1
  15. package/dist/components/ContentDivider.tsx +1 -1
  16. package/dist/components/DragHandleDocs.tsx +2 -2
  17. package/dist/components/Index.tsx +105 -50
  18. package/dist/components/Panel.tsx +13 -13
  19. package/dist/components/Tags.tsx +2 -2
  20. package/dist/components/Togglebox.tsx +154 -15
  21. package/dist/components/utilities/BorderRadiusUtilities.tsx +56 -0
  22. package/dist/components/utilities/BorderUtilities.tsx +170 -0
  23. package/dist/components/utilities/DisplayUtilities.tsx +116 -0
  24. package/dist/components/utilities/FlexAndGridUtilities.tsx +551 -0
  25. package/dist/components/utilities/ObjectFitUtilities.tsx +53 -0
  26. package/dist/components/utilities/ObjectPositionUtilities.tsx +68 -0
  27. package/dist/components/utilities/OpacityUtilities.tsx +64 -0
  28. package/dist/components/utilities/OverflowUtilities.tsx +93 -0
  29. package/dist/components/utilities/PositionUtilities.tsx +52 -0
  30. package/dist/components/utilities/ShadowUtilities.tsx +123 -0
  31. package/dist/components/utilities/SpacingUtilities.tsx +2 -2
  32. package/dist/components/utilities/TextUtilities.tsx +44 -4
  33. package/dist/components.html +2 -4
  34. package/dist/components_deprecated/modals.html +2 -2
  35. package/dist/components_deprecated.html +1 -0
  36. package/dist/design-patterns/Index.tsx +1 -42
  37. package/dist/design-patterns.html +2 -4
  38. package/dist/design.html +1 -0
  39. package/dist/examples.bundle.css +15 -7
  40. package/dist/examples.bundle.js +3104 -1270
  41. package/dist/main.html +1 -0
  42. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +1 -1
  43. package/dist/playgrounds/react-playgrounds/TestGround.tsx +214 -2
  44. package/dist/playgrounds.html +1 -0
  45. package/dist/superdesk-ui.bundle.css +1331 -1006
  46. package/dist/superdesk-ui.bundle.js +1094 -919
  47. package/dist/vendor.bundle.js +13 -13
  48. package/examples/css/docs-page.css +15 -7
  49. package/examples/js/doc.js +13 -1
  50. package/examples/pages/components/Alerts.tsx +1 -1
  51. package/examples/pages/components/ContentDivider.tsx +1 -1
  52. package/examples/pages/components/DragHandleDocs.tsx +2 -2
  53. package/examples/pages/components/Index.tsx +105 -50
  54. package/examples/pages/components/Panel.tsx +13 -13
  55. package/examples/pages/components/Tags.tsx +2 -2
  56. package/examples/pages/components/Togglebox.tsx +154 -15
  57. package/examples/pages/components/utilities/BorderRadiusUtilities.tsx +56 -0
  58. package/examples/pages/components/utilities/BorderUtilities.tsx +170 -0
  59. package/examples/pages/components/utilities/DisplayUtilities.tsx +116 -0
  60. package/examples/pages/components/utilities/FlexAndGridUtilities.tsx +551 -0
  61. package/examples/pages/components/utilities/ObjectFitUtilities.tsx +53 -0
  62. package/examples/pages/components/utilities/ObjectPositionUtilities.tsx +68 -0
  63. package/examples/pages/components/utilities/OpacityUtilities.tsx +64 -0
  64. package/examples/pages/components/utilities/OverflowUtilities.tsx +93 -0
  65. package/examples/pages/components/utilities/PositionUtilities.tsx +52 -0
  66. package/examples/pages/components/utilities/ShadowUtilities.tsx +123 -0
  67. package/examples/pages/components/utilities/SpacingUtilities.tsx +2 -2
  68. package/examples/pages/components/utilities/TextUtilities.tsx +44 -4
  69. package/examples/pages/components.html +2 -4
  70. package/examples/pages/components_deprecated/modals.html +2 -2
  71. package/examples/pages/components_deprecated.html +1 -0
  72. package/examples/pages/design-patterns/Index.tsx +1 -42
  73. package/examples/pages/design-patterns.html +2 -4
  74. package/examples/pages/design.html +1 -0
  75. package/examples/pages/main.html +1 -0
  76. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +1 -1
  77. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +214 -2
  78. package/examples/pages/playgrounds.html +1 -0
  79. package/package.json +1 -1
  80. package/react/components/ToggleBox/CustomHeaderToggleBox.d.ts +11 -0
  81. package/react/components/ToggleBox/CustomHeaderToggleBox.js +78 -0
  82. package/react/components/ToggleBox/SimpleToggleBox.d.ts +18 -0
  83. package/react/components/{Togglebox.js → ToggleBox/SimpleToggleBox.js} +7 -7
  84. package/react/components/ToggleBox/index.d.ts +26 -0
  85. package/react/components/ToggleBox/index.js +71 -0
  86. package/react/components/TreeMenu.js +4 -2
  87. package/react/index.d.ts +1 -1
  88. package/react/index.js +2 -2
  89. package/react/components/Togglebox.d.ts +0 -28
package/dist/components/utilities/DisplayUtilities.tsx ADDED
@@ -0,0 +1,116 @@
1
+ import * as React from 'react';
2
+ import * as Markup from '../../../js/react';
3
+
4
+ class DisplayUtilitiesDoc extends React.Component {
5
+ render() {
6
+ return (
7
+ <section className="docs-page__container">
8
+ <h2 className="docs-page__h2">Display</h2>
9
+ <p className="docs-page__paragraph">
10
+ Utility classes for controlling the display box type of an element.
11
+ </p>
12
+ <div className='docs-page__container-block--display'>
13
+ <div className="utilities-table__container utilities-table__container--no-height">
14
+ <table className="table utilities-table">
15
+ <thead>
16
+ <tr>
17
+ <th>Class</th>
18
+ <th>Properties</th>
19
+ </tr>
20
+ </thead>
21
+ <tbody>
22
+ <tr>
23
+ <td>d-block</td>
24
+ <td>{'display: auto !important;'}</td>
25
+ </tr>
26
+ <tr>
27
+ <td>d-inline-block</td>
28
+ <td>{'display: inline-block !important;'}</td>
29
+ </tr>
30
+ <tr>
31
+ <td>d-inline</td>
32
+ <td>{'display: inline !important;'}</td>
33
+ </tr>
34
+ <tr>
35
+ <td>d-flex</td>
36
+ <td>{'display: flex !important;'}</td>
37
+ </tr>
38
+ <tr>
39
+ <td>d-inline-flex</td>
40
+ <td>{'display: inline-flex !important;'}</td>
41
+ </tr>
42
+ <tr>
43
+ <td>d-grid</td>
44
+ <td>{'display: grid !important;'}</td>
45
+ </tr>
46
+ <tr>
47
+ <td>d-inline-grid</td>
48
+ <td>{'display: inline-grid !important;'}</td>
49
+ </tr>
50
+ <tr>
51
+ <td>d-contents</td>
52
+ <td>{'display: contents !important;'}</td>
53
+ </tr>
54
+ <tr>
55
+ <td>d-none</td>
56
+ <td>{'display: none !important;'}</td>
57
+ </tr>
58
+ <tr>
59
+ <td>d-flow-root</td>
60
+ <td>{'display: flow-root !important;'}</td>
61
+ </tr>
62
+ <tr>
63
+ <td>d-list-item</td>
64
+ <td>{'display: list-item !important;'}</td>
65
+ </tr>
66
+ <tr>
67
+ <td>d-table</td>
68
+ <td>{'display: table;'}</td>
69
+ </tr>
70
+ <tr>
71
+ <td>d-inline-table</td>
72
+ <td>{'display: inline-table;'}</td>
73
+ </tr>
74
+ <tr>
75
+ <td>d-table-caption</td>
76
+ <td>{'display: table-caption;'}</td>
77
+ </tr>
78
+ <tr>
79
+ <td>d-table-cell</td>
80
+ <td>{'display: table-cell;'}</td>
81
+ </tr>
82
+ <tr>
83
+ <td>d-table-column</td>
84
+ <td>{'display: table-column;'}</td>
85
+ </tr>
86
+ <tr>
87
+ <td>d-table-column-group</td>
88
+ <td>{'display: table-column-group;'}</td>
89
+ </tr>
90
+ <tr>
91
+ <td>d-table-footer-group</td>
92
+ <td>{'display: table-footer-group;'}</td>
93
+ </tr>
94
+ <tr>
95
+ <td>d-table-header-group</td>
96
+ <td>{'display: table-header-group;'}</td>
97
+ </tr>
98
+ <tr>
99
+ <td>d-table-row</td>
100
+ <td>{'display: table-row;'}</td>
101
+ </tr>
102
+ <tr>
103
+ <td>d-table-row-group</td>
104
+ <td>{'display: table-row-group;'}</td>
105
+ </tr>
106
+ </tbody>
107
+ </table>
108
+ </div>
109
+ </div>
110
+
111
+ </section>
112
+ )
113
+ }
114
+ }
115
+
116
+ export { DisplayUtilitiesDoc };
package/dist/components/utilities/FlexAndGridUtilities.tsx ADDED
@@ -0,0 +1,551 @@
1
+ import * as React from 'react';
2
+ import * as Markup from '../../../js/react';
3
+
4
+ class FlexAndGridUtilitiesDoc extends React.Component {
5
+ render() {
6
+ return (
7
+ <section className="docs-page__container">
8
+ <h2 className="docs-page__h2">Flex & Grid</h2>
9
+
10
+ <div className='docs-page__container-block--flex-direction'>
11
+ <h3 className="docs-page__h3">Flex Direction</h3>
12
+ <p className='docs-page__paragraph'>
13
+ Utilities classes for controlling the direction of flex items.
14
+ </p>
15
+ <div className="utilities-table__container">
16
+ <table className="table utilities-table">
17
+ <thead>
18
+ <tr>
19
+ <th>Class</th>
20
+ <th>Properties</th>
21
+ </tr>
22
+ </thead>
23
+ <tbody>
24
+ <tr>
25
+ <td>flex-row</td>
26
+ <td>{'flex-direction: row !important;'}</td>
27
+ </tr>
28
+ <tr>
29
+ <td>flex-col</td>
30
+ <td>{'display: inline !important;'}</td>
31
+ </tr>
32
+ <tr>
33
+ <td>flex-row-reverse</td>
34
+ <td>{'flex-direction: row-reverse !important;'}</td>
35
+ </tr>
36
+ <tr>
37
+ <td>flex-col-reverse</td>
38
+ <td>{'flex-direction: column-reverse !important;'}</td>
39
+ </tr>
40
+
41
+ </tbody>
42
+ </table>
43
+ </div>
44
+ </div>
45
+
46
+ <div className='docs-page__container-block--flex-wrap'>
47
+ <h3 className="docs-page__h3">Flex Wrap</h3>
48
+ <p className='docs-page__paragraph'>
49
+ Utilities classes for controlling how flex items wrap.
50
+ </p>
51
+ <div className="utilities-table__container">
52
+ <table className="table utilities-table">
53
+ <thead>
54
+ <tr>
55
+ <th>Class</th>
56
+ <th>Properties</th>
57
+ </tr>
58
+ </thead>
59
+ <tbody>
60
+ <tr>
61
+ <td>flex-wrap</td>
62
+ <td>{'flex-wrap: wrap;'}</td>
63
+ </tr>
64
+ <tr>
65
+ <td>flex-nowrap</td>
66
+ <td>{'flex-wrap: nowrap;'}</td>
67
+ </tr>
68
+ <tr>
69
+ <td>flex-wrap-reverse</td>
70
+ <td>{'flex-wrap: wrap-reverse;'}</td>
71
+ </tr>
72
+ </tbody>
73
+ </table>
74
+ </div>
75
+ </div>
76
+
77
+ <div className='docs-page__container-block--flex'>
78
+ <h3 className="docs-page__h3">Flex</h3>
79
+ <p className='docs-page__paragraph'>
80
+ Utilities classes for controlling how flex items both grow and shrink.
81
+ </p>
82
+ <div className="utilities-table__container">
83
+ <table className="table utilities-table">
84
+ <thead>
85
+ <tr>
86
+ <th>Class</th>
87
+ <th>Properties</th>
88
+ </tr>
89
+ </thead>
90
+ <tbody>
91
+ <tr>
92
+ <td>flex-1</td>
93
+ <td>{'flex: 1 1 0%;'}</td>
94
+ </tr>
95
+ <tr>
96
+ <td>flex-auto</td>
97
+ <td>{'flex: 1 1 auto;'}</td>
98
+ </tr>
99
+ <tr>
100
+ <td>flex-initial</td>
101
+ <td>{'flex: 0 1 auto;'}</td>
102
+ </tr>
103
+ <tr>
104
+ <td>flex-none</td>
105
+ <td>{'flex: none;'}</td>
106
+ </tr>
107
+ </tbody>
108
+ </table>
109
+ </div>
110
+ </div>
111
+
112
+ <div className='docs-page__container-block--flex-grow-shrink'>
113
+ <h3 className="docs-page__h3">Flex Grow & Flex Shrink</h3>
114
+ <p className='docs-page__paragraph'>
115
+ Utilities classes for controlling how flex items individually grow or shrink.
116
+ </p>
117
+ <div className="utilities-table__container">
118
+ <table className="table utilities-table">
119
+ <thead>
120
+ <tr>
121
+ <th>Class</th>
122
+ <th>Properties</th>
123
+ </tr>
124
+ </thead>
125
+ <tbody>
126
+ <tr className='utilities-table__divider-row'>
127
+ <td>Flex grow</td>
128
+ <td></td>
129
+ </tr>
130
+ <tr>
131
+ <td>flex-grow</td>
132
+ <td>{'flex-grow: 1 !important;'}</td>
133
+ </tr>
134
+ <tr>
135
+ <td>flex-grow-0</td>
136
+ <td>{'flex-grow: 0 !important;'}</td>
137
+ </tr>
138
+ <tr className='utilities-table__divider-row'>
139
+ <td>Flex shrink</td>
140
+ <td></td>
141
+ </tr>
142
+ <tr>
143
+ <td>flex-shrink</td>
144
+ <td>{'flex-shrink: 1 !important;'}</td>
145
+ </tr>
146
+ <tr>
147
+ <td>flex-shrink-0</td>
148
+ <td>{'flex-shrink: 0 !important;'}</td>
149
+ </tr>
150
+ </tbody>
151
+ </table>
152
+ </div>
153
+ </div>
154
+
155
+ <div className='docs-page__container-block--flex-grow-shrink'>
156
+ <h3 className="docs-page__h3">Justify Content</h3>
157
+ <p className='docs-page__paragraph'>
158
+ Utilities classes for controlling how flex and grid items are positioned along a container's main axis.
159
+ </p>
160
+ <div className="utilities-table__container">
161
+ <table className="table utilities-table">
162
+ <thead>
163
+ <tr>
164
+ <th>Class</th>
165
+ <th>Properties</th>
166
+ </tr>
167
+ </thead>
168
+ <tbody>
169
+ <tr>
170
+ <td>justify-start</td>
171
+ <td>{'justify-content: flex-start !important;'}</td>
172
+ </tr>
173
+ <tr>
174
+ <td>justify-end </td>
175
+ <td>{'justify-content: flex-end !important;'}</td>
176
+ </tr>
177
+ <tr>
178
+ <td>justify-center</td>
179
+ <td>{'justify-content: center !important;'}</td>
180
+ </tr>
181
+ <tr>
182
+ <td>justify-between </td>
183
+ <td>{'justify-content: space-between !important;'}</td>
184
+ </tr>
185
+ <tr>
186
+ <td>justify-around</td>
187
+ <td>{'justify-content: flex-start !important;'}</td>
188
+ </tr>
189
+ <tr>
190
+ <td>justify-evenly</td>
191
+ <td>{'justify-content: space-evenly !important;'}</td>
192
+ </tr>
193
+ <tr>
194
+ <td>justify-normal</td>
195
+ <td>{'justify-content: normal !important;'}</td>
196
+ </tr>
197
+ <tr>
198
+ <td>justify-stretch</td>
199
+ <td>{'justify-content: stretch !important;'}</td>
200
+ </tr>
201
+ </tbody>
202
+ </table>
203
+ </div>
204
+ </div>
205
+
206
+ <div className='docs-page__container-block--justify-items'>
207
+ <h3 className="docs-page__h3">Justify Items</h3>
208
+ <p className='docs-page__paragraph'>
209
+ Utilities classes for controlling how grid items are aligned along their inline axis.
210
+ </p>
211
+ <div className="utilities-table__container">
212
+ <table className="table utilities-table">
213
+ <thead>
214
+ <tr>
215
+ <th>Class</th>
216
+ <th>Properties</th>
217
+ </tr>
218
+ </thead>
219
+ <tbody>
220
+ <tr>
221
+ <td>justify-items-start</td>
222
+ <td>{'justify-items: start;'}</td>
223
+ </tr>
224
+ <tr>
225
+ <td>justify-items-end</td>
226
+ <td>{'justify-items: end;'}</td>
227
+ </tr>
228
+ <tr>
229
+ <td>justify-items-center</td>
230
+ <td>{'justify-items: center;'}</td>
231
+ </tr>
232
+ <tr>
233
+ <td>justify-items-stretch</td>
234
+ <td>{'justify-items: stretch;'}</td>
235
+ </tr>
236
+ </tbody>
237
+ </table>
238
+ </div>
239
+ </div>
240
+
241
+ <div className='docs-page__container-block--justify-self'>
242
+ <h3 className="docs-page__h3">Justify Self</h3>
243
+ <p className='docs-page__paragraph'>
244
+ Utilities classes for controlling how an individual grid item is aligned along its inline axis.
245
+ </p>
246
+ <div className="utilities-table__container">
247
+ <table className="table utilities-table">
248
+ <thead>
249
+ <tr>
250
+ <th>Class</th>
251
+ <th>Properties</th>
252
+ </tr>
253
+ </thead>
254
+ <tbody>
255
+ <tr>
256
+ <td>justify-self-auto</td>
257
+ <td>{'justify-self: auto;'}</td>
258
+ </tr>
259
+ <tr>
260
+ <td>justify-self-start</td>
261
+ <td>{'justify-self: start;'}</td>
262
+ </tr>
263
+ <tr>
264
+ <td>justify-self-end</td>
265
+ <td>{'justify-self: end;'}</td>
266
+ </tr>
267
+ <tr>
268
+ <td>justify-items-center</td>
269
+ <td>{'justify-self: center;'}</td>
270
+ </tr>
271
+ <tr>
272
+ <td>justify-self-stretch</td>
273
+ <td>{'justify-self: stretch;'}</td>
274
+ </tr>
275
+ </tbody>
276
+ </table>
277
+ </div>
278
+ </div>
279
+
280
+ <div className='docs-page__container-block--align-content'>
281
+ <h3 className="docs-page__h3">Align Content</h3>
282
+ <p className='docs-page__paragraph'>
283
+ Utilities classes for controlling how rows are positioned in multi-row flex and grid containers.
284
+ </p>
285
+ <div className="utilities-table__container utilities-table__container--no-height">
286
+ <table className="table utilities-table">
287
+ <thead>
288
+ <tr>
289
+ <th>Class</th>
290
+ <th>Properties</th>
291
+ </tr>
292
+ </thead>
293
+ <tbody>
294
+ <tr>
295
+ <td>content-normal</td>
296
+ <td>{'align-content: normal;'}</td>
297
+ </tr>
298
+ <tr>
299
+ <td>content-center</td>
300
+ <td>{'align-content: center;'}</td>
301
+ </tr>
302
+ <tr>
303
+ <td>content-start</td>
304
+ <td>{'align-content: start;'}</td>
305
+ </tr>
306
+ <tr>
307
+ <td>content-end</td>
308
+ <td>{'align-content: end;'}</td>
309
+ </tr>
310
+ <tr>
311
+ <td>content-between</td>
312
+ <td>{'align-content: space-between;'}</td>
313
+ </tr>
314
+ <tr>
315
+ <td>content-around</td>
316
+ <td>{'align-content: space-around;'}</td>
317
+ </tr>
318
+ <tr>
319
+ <td>content-evenly</td>
320
+ <td>{'align-content: space-evenly;'}</td>
321
+ </tr>
322
+ <tr>
323
+ <td>content-baseline</td>
324
+ <td>{'align-content: baseline;'}</td>
325
+ </tr>
326
+ <tr>
327
+ <td>content-stretch</td>
328
+ <td>{'align-content: stretch;'}</td>
329
+ </tr>
330
+ </tbody>
331
+ </table>
332
+ </div>
333
+ </div>
334
+
335
+ <div className='docs-page__container-block--align-items'>
336
+ <h3 className="docs-page__h3">Align Items</h3>
337
+ <p className='docs-page__paragraph'>
338
+ Utilities classes for controlling how flex and grid items are positioned along a container's cross axis.
339
+ </p>
340
+ <div className="utilities-table__container">
341
+ <table className="table utilities-table">
342
+ <thead>
343
+ <tr>
344
+ <th>Class</th>
345
+ <th>Properties</th>
346
+ </tr>
347
+ </thead>
348
+ <tbody>
349
+ <tr>
350
+ <td>items-start</td>
351
+ <td>{'align-items: flex-start;'}</td>
352
+ </tr>
353
+ <tr>
354
+ <td>items-end</td>
355
+ <td>{'align-items: flex-end;'}</td>
356
+ </tr>
357
+ <tr>
358
+ <td>items-center</td>
359
+ <td>{'align-items: center;'}</td>
360
+ </tr>
361
+ <tr>
362
+ <td>items-baseline</td>
363
+ <td>{'align-items: baseline;'}</td>
364
+ </tr>
365
+ <tr>
366
+ <td>items-stretch</td>
367
+ <td>{'align-items: stretch;'}</td>
368
+ </tr>
369
+ </tbody>
370
+ </table>
371
+ </div>
372
+ </div>
373
+
374
+ <div className='docs-page__container-block--align-self'>
375
+ <h3 className="docs-page__h3">Align Self</h3>
376
+ <p className='docs-page__paragraph'>
377
+ Utilities classes for controlling how an individual flex or grid item is positioned along its container's cross axis.
378
+ </p>
379
+ <div className="utilities-table__container">
380
+ <table className="table utilities-table">
381
+ <thead>
382
+ <tr>
383
+ <th>Class</th>
384
+ <th>Properties</th>
385
+ </tr>
386
+ </thead>
387
+ <tbody>
388
+ <tr>
389
+ <td>self-auto</td>
390
+ <td>{'align-self: auto;'}</td>
391
+ </tr>
392
+ <tr>
393
+ <td>self-start</td>
394
+ <td>{'align-self: flex-start;'}</td>
395
+ </tr>
396
+ <tr>
397
+ <td>self-end</td>
398
+ <td>{'align-self: flex-end;'}</td>
399
+ </tr>
400
+ <tr>
401
+ <td>self-center</td>
402
+ <td>{'align-self: center;'}</td>
403
+ </tr>
404
+ <tr>
405
+ <td>self-baseline</td>
406
+ <td>{'align-self: baseline;'}</td>
407
+ </tr>
408
+ <tr>
409
+ <td>self-stretch</td>
410
+ <td>{'align-self: stretch;'}</td>
411
+ </tr>
412
+ </tbody>
413
+ </table>
414
+ </div>
415
+ </div>
416
+
417
+ <div className='docs-page__container-block--place-content'>
418
+ <h3 className="docs-page__h3">Place Content</h3>
419
+ <p className='docs-page__paragraph'>
420
+ Utilities classes for controlling how content is justified and aligned at the same time.
421
+ </p>
422
+ <div className="utilities-table__container">
423
+ <table className="table utilities-table">
424
+ <thead>
425
+ <tr>
426
+ <th>Class</th>
427
+ <th>Properties</th>
428
+ </tr>
429
+ </thead>
430
+ <tbody>
431
+ <tr>
432
+ <td>place-content-center</td>
433
+ <td>{'place-content: center;'}</td>
434
+ </tr>
435
+ <tr>
436
+ <td>place-content-start</td>
437
+ <td>{'place-content: start;'}</td>
438
+ </tr>
439
+ <tr>
440
+ <td>place-content-end</td>
441
+ <td>{'place-content: end;'}</td>
442
+ </tr>
443
+ <tr>
444
+ <td>place-content-between</td>
445
+ <td>{'place-content: space-between;'}</td>
446
+ </tr>
447
+ <tr>
448
+ <td>place-content-around</td>
449
+ <td>{'place-content: space-around;'}</td>
450
+ </tr>
451
+ <tr>
452
+ <td>place-content-evenly</td>
453
+ <td>{'place-content: space-evenly;'}</td>
454
+ </tr>
455
+ <tr>
456
+ <td>place-content-baseline</td>
457
+ <td>{'place-content: baseline;'}</td>
458
+ </tr>
459
+ <tr>
460
+ <td>place-content-stretch</td>
461
+ <td>{'place-content: stretch;'}</td>
462
+ </tr>
463
+ </tbody>
464
+ </table>
465
+ </div>
466
+ </div>
467
+
468
+ <div className='docs-page__container-block--place-items'>
469
+ <h3 className="docs-page__h3">Place Items</h3>
470
+ <p className='docs-page__paragraph'>
471
+ Utilities classes for controlling how items are justified and aligned at the same time.
472
+ </p>
473
+ <div className="utilities-table__container">
474
+ <table className="table utilities-table">
475
+ <thead>
476
+ <tr>
477
+ <th>Class</th>
478
+ <th>Properties</th>
479
+ </tr>
480
+ </thead>
481
+ <tbody>
482
+ <tr>
483
+ <td>place-items-start</td>
484
+ <td>{'place-items: start;'}</td>
485
+ </tr>
486
+ <tr>
487
+ <td>place-items-end</td>
488
+ <td>{'place-items: end;'}</td>
489
+ </tr>
490
+ <tr>
491
+ <td>place-items-center</td>
492
+ <td>{'place-items: center;'}</td>
493
+ </tr>
494
+ <tr>
495
+ <td>place-items-baseline</td>
496
+ <td>{'place-items: baseline;'}</td>
497
+ </tr>
498
+ <tr>
499
+ <td>place-items-stretch</td>
500
+ <td>{'place-items: stretch;'}</td>
501
+ </tr>
502
+ </tbody>
503
+ </table>
504
+ </div>
505
+ </div>
506
+
507
+ <div className='docs-page__container-block--place-self'>
508
+ <h3 className="docs-page__h3">Place Self</h3>
509
+ <p className='docs-page__paragraph'>
510
+ Utilities classes for controlling how an individual item is justified and aligned at the same time.
511
+ </p>
512
+ <div className="utilities-table__container">
513
+ <table className="table utilities-table">
514
+ <thead>
515
+ <tr>
516
+ <th>Class</th>
517
+ <th>Properties</th>
518
+ </tr>
519
+ </thead>
520
+ <tbody>
521
+ <tr>
522
+ <td>place-self-auto</td>
523
+ <td>{'place-self: auto;'}</td>
524
+ </tr>
525
+ <tr>
526
+ <td>place-self-start</td>
527
+ <td>{'place-self: start;'}</td>
528
+ </tr>
529
+ <tr>
530
+ <td>place-self-end</td>
531
+ <td>{'place-self: end;'}</td>
532
+ </tr>
533
+ <tr>
534
+ <td>place-self-center</td>
535
+ <td>{'place-self: center;'}</td>
536
+ </tr>
537
+ <tr>
538
+ <td>place-self-stretch</td>
539
+ <td>{'place-self: stretch;'}</td>
540
+ </tr>
541
+ </tbody>
542
+ </table>
543
+ </div>
544
+ </div>
545
+
546
+ </section>
547
+ )
548
+ }
549
+ }
550
+
551
+ export { FlexAndGridUtilitiesDoc };