superdesk-ui-framework 3.1.9 → 3.1.13

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 (113) hide show
  1. package/app/styles/_helpers.scss +926 -776
  2. package/app/styles/_master-desk.scss +2 -2
  3. package/app/styles/_toggle-box.scss +45 -28
  4. package/app/styles/components/_sd-collapse-box.scss +113 -0
  5. package/app/styles/components/_subnav.scss +0 -1
  6. package/app/styles/design-tokens/_design-tokens-general.scss +19 -5
  7. package/app/styles/design-tokens/_new-colors.scss +11 -1
  8. package/app/styles/form-elements/_inputs.scss +14 -0
  9. package/app/styles/grids/_grid-layout.scss +3 -0
  10. package/app-typescript/components/DatePicker.tsx +6 -0
  11. package/app-typescript/components/Layouts/LayoutContainer.tsx +7 -1
  12. package/app-typescript/components/Layouts/PageLayout.tsx +2 -1
  13. package/app-typescript/components/TimePickerV2.tsx +222 -0
  14. package/app-typescript/components/ToggleBox/CustomHeaderToggleBox.tsx +61 -0
  15. package/app-typescript/components/{Togglebox.tsx → ToggleBox/SimpleToggleBox.tsx} +13 -34
  16. package/app-typescript/components/ToggleBox/index.tsx +43 -0
  17. package/app-typescript/components/TreeMenu.tsx +12 -7
  18. package/app-typescript/components/TreeSelect/TreeSelect.tsx +13 -12
  19. package/app-typescript/components/TreeSelect/TreeSelectItem.tsx +11 -1
  20. package/app-typescript/index.ts +2 -1
  21. package/dist/components/Alerts.tsx +1 -1
  22. package/dist/components/ContentDivider.tsx +1 -1
  23. package/dist/components/DragHandleDocs.tsx +2 -2
  24. package/dist/components/Index.tsx +105 -50
  25. package/dist/components/Panel.tsx +13 -13
  26. package/dist/components/Tags.tsx +2 -2
  27. package/dist/components/TimePicker.tsx +43 -1
  28. package/dist/components/Togglebox.tsx +171 -17
  29. package/dist/components/TreeMenu.tsx +2 -0
  30. package/dist/components/utilities/BorderRadiusUtilities.tsx +56 -0
  31. package/dist/components/utilities/BorderUtilities.tsx +170 -0
  32. package/dist/components/utilities/DisplayUtilities.tsx +116 -0
  33. package/dist/components/utilities/FlexAndGridUtilities.tsx +551 -0
  34. package/dist/components/utilities/ObjectFitUtilities.tsx +53 -0
  35. package/dist/components/utilities/ObjectPositionUtilities.tsx +68 -0
  36. package/dist/components/utilities/OpacityUtilities.tsx +64 -0
  37. package/dist/components/utilities/OverflowUtilities.tsx +93 -0
  38. package/dist/components/utilities/PositionUtilities.tsx +52 -0
  39. package/dist/components/utilities/ShadowUtilities.tsx +123 -0
  40. package/dist/components/utilities/SpacingUtilities.tsx +2 -2
  41. package/dist/components/utilities/TextUtilities.tsx +83 -4
  42. package/dist/components.html +2 -4
  43. package/dist/components_deprecated/modals.html +2 -2
  44. package/dist/components_deprecated.html +1 -0
  45. package/dist/design-patterns/Index.tsx +1 -42
  46. package/dist/design-patterns/ThreePaneLayoutPattern.tsx +1 -1
  47. package/dist/design-patterns.html +2 -4
  48. package/dist/design.html +1 -0
  49. package/dist/examples.bundle.css +15 -7
  50. package/dist/examples.bundle.js +4283 -2189
  51. package/dist/main.html +1 -0
  52. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +1 -1
  53. package/dist/playgrounds/react-playgrounds/TestGround.tsx +214 -2
  54. package/dist/playgrounds.html +1 -0
  55. package/dist/superdesk-ui.bundle.css +1397 -1019
  56. package/dist/superdesk-ui.bundle.js +2039 -1653
  57. package/dist/vendor.bundle.js +16 -16
  58. package/examples/css/docs-page.css +15 -7
  59. package/examples/js/doc.js +13 -1
  60. package/examples/pages/components/Alerts.tsx +1 -1
  61. package/examples/pages/components/ContentDivider.tsx +1 -1
  62. package/examples/pages/components/DragHandleDocs.tsx +2 -2
  63. package/examples/pages/components/Index.tsx +105 -50
  64. package/examples/pages/components/Panel.tsx +13 -13
  65. package/examples/pages/components/Tags.tsx +2 -2
  66. package/examples/pages/components/TimePicker.tsx +43 -1
  67. package/examples/pages/components/Togglebox.tsx +171 -17
  68. package/examples/pages/components/TreeMenu.tsx +2 -0
  69. package/examples/pages/components/utilities/BorderRadiusUtilities.tsx +56 -0
  70. package/examples/pages/components/utilities/BorderUtilities.tsx +170 -0
  71. package/examples/pages/components/utilities/DisplayUtilities.tsx +116 -0
  72. package/examples/pages/components/utilities/FlexAndGridUtilities.tsx +551 -0
  73. package/examples/pages/components/utilities/ObjectFitUtilities.tsx +53 -0
  74. package/examples/pages/components/utilities/ObjectPositionUtilities.tsx +68 -0
  75. package/examples/pages/components/utilities/OpacityUtilities.tsx +64 -0
  76. package/examples/pages/components/utilities/OverflowUtilities.tsx +93 -0
  77. package/examples/pages/components/utilities/PositionUtilities.tsx +52 -0
  78. package/examples/pages/components/utilities/ShadowUtilities.tsx +123 -0
  79. package/examples/pages/components/utilities/SpacingUtilities.tsx +2 -2
  80. package/examples/pages/components/utilities/TextUtilities.tsx +83 -4
  81. package/examples/pages/components.html +2 -4
  82. package/examples/pages/components_deprecated/modals.html +2 -2
  83. package/examples/pages/components_deprecated.html +1 -0
  84. package/examples/pages/design-patterns/Index.tsx +1 -42
  85. package/examples/pages/design-patterns/ThreePaneLayoutPattern.tsx +1 -1
  86. package/examples/pages/design-patterns.html +2 -4
  87. package/examples/pages/design.html +1 -0
  88. package/examples/pages/main.html +1 -0
  89. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +1 -1
  90. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +214 -2
  91. package/examples/pages/playgrounds.html +1 -0
  92. package/package.json +1 -1
  93. package/react/components/DatePicker.d.ts +3 -0
  94. package/react/components/DatePicker.js +2 -2
  95. package/react/components/Layouts/LayoutContainer.d.ts +1 -0
  96. package/react/components/Layouts/LayoutContainer.js +8 -1
  97. package/react/components/Layouts/PageLayout.d.ts +1 -0
  98. package/react/components/Layouts/PageLayout.js +1 -1
  99. package/react/components/TimePickerV2.d.ts +28 -0
  100. package/react/components/TimePickerV2.js +189 -0
  101. package/react/components/ToggleBox/CustomHeaderToggleBox.d.ts +12 -0
  102. package/react/components/ToggleBox/CustomHeaderToggleBox.js +81 -0
  103. package/react/components/ToggleBox/SimpleToggleBox.d.ts +18 -0
  104. package/react/components/{Togglebox.js → ToggleBox/SimpleToggleBox.js} +15 -13
  105. package/react/components/ToggleBox/index.d.ts +27 -0
  106. package/react/components/ToggleBox/index.js +71 -0
  107. package/react/components/TreeMenu.js +9 -7
  108. package/react/components/TreeSelect/TreeSelect.js +9 -11
  109. package/react/components/TreeSelect/TreeSelectItem.d.ts +1 -0
  110. package/react/components/TreeSelect/TreeSelectItem.js +7 -4
  111. package/react/index.d.ts +2 -1
  112. package/react/index.js +7 -5
  113. package/react/components/Togglebox.d.ts +0 -28
package/dist/components/utilities/BorderRadiusUtilities.tsx ADDED
@@ -0,0 +1,56 @@
1
+ import * as React from 'react';
2
+ import * as Markup from '../../../js/react';
3
+
4
+ class BorderRadiusUtilitiesDoc extends React.Component {
5
+ render() {
6
+ return (
7
+ <section className="docs-page__container">
8
+ <h2 className="docs-page__h2">Border Radius</h2>
9
+ <p className="docs-page__paragraph">
10
+ Utility classes for controlling the border radius of an element.
11
+ </p>
12
+ <div className='docs-page__container-block--position'>
13
+ <div className="utilities-table__container">
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>radius-xs</td>
24
+ <td>{'border-radius: var(--b-radius--x-small);'} <span className="doc-text--highlight">/* 2px */</span></td>
25
+ </tr>
26
+ <tr>
27
+ <td>radius-sm</td>
28
+ <td>{'border-radius: var(--b-radius--small);'} <span className="doc-text--highlight">/* 3px */</span></td>
29
+ </tr>
30
+ <tr>
31
+ <td>radius-md</td>
32
+ <td>{'border-radius: var(--b-radius--medium);'} <span className="doc-text--highlight">/* 4px */</span></td>
33
+ </tr>
34
+ <tr>
35
+ <td>radius-lg</td>
36
+ <td>{'border-radius: var(--b-radius--large);'} <span className="doc-text--highlight">/* 6px */</span></td>
37
+ </tr>
38
+ <tr>
39
+ <td>radius-xl</td>
40
+ <td>{'border-radius: var(--b-radius--x-large);'} <span className="doc-text--highlight">/* 8px */</span></td>
41
+ </tr>
42
+ <tr>
43
+ <td>radius-full</td>
44
+ <td>{'border-radius: var(--b-radius--full);'} <span className="doc-text--highlight">/* 9999px */</span></td>
45
+ </tr>
46
+ </tbody>
47
+ </table>
48
+ </div>
49
+ </div>
50
+
51
+ </section>
52
+ )
53
+ }
54
+ }
55
+
56
+ export { BorderRadiusUtilitiesDoc };
package/dist/components/utilities/BorderUtilities.tsx ADDED
@@ -0,0 +1,170 @@
1
+ import * as React from 'react';
2
+ import * as Markup from '../../../js/react';
3
+
4
+ class BorderUtilitiesDoc extends React.Component {
5
+ render() {
6
+ return (
7
+ <section className="docs-page__container">
8
+ <h2 className="docs-page__h2">Border</h2>
9
+ <p className="docs-page__paragraph">
10
+ Utility classes for controlling the borders of an element..
11
+ </p>
12
+ <div className='docs-page__container-block--border'>
13
+ <h3 className="docs-page__h3">Basic Border with neutral color</h3>
14
+ <p className='docs-page__paragraph'>
15
+ Utilities classes for adding a neutral 1px solid border to an element.
16
+ </p>
17
+ <div className="utilities-table__container">
18
+ <table className="table utilities-table">
19
+ <thead>
20
+ <tr>
21
+ <th>Class</th>
22
+ <th>Properties</th>
23
+ <th></th>
24
+ </tr>
25
+ </thead>
26
+ <tbody>
27
+ <tr>
28
+ <td>sd-border--x-light</td>
29
+ <td>{'border: 1px solid var(--sd-colour-line--x-light);'}</td>
30
+ <td><div className='border-example-box sd-border--x-light'></div></td>
31
+ </tr>
32
+ <tr>
33
+ <td>sd-border--light</td>
34
+ <td>{'border: 1px solid var(--sd-colour-line--light);'}</td>
35
+ <td><div className='border-example-box sd-border--light'></div></td>
36
+ </tr>
37
+ <tr>
38
+ <td>sd-border--medium</td>
39
+ <td>{'border: 1px solid var(--sd-colour-line--medium);'}</td>
40
+ <td><div className='border-example-box sd-border--medium'></div></td>
41
+ </tr>
42
+ <tr>
43
+ <td>sd-border--strong</td>
44
+ <td>{'border: 1px solid var(--sd-colour-line--strong);'}</td>
45
+ <td><div className='border-example-box sd-border--strong'></div></td>
46
+ </tr>
47
+ </tbody>
48
+ </table>
49
+ </div>
50
+ </div>
51
+
52
+ <div className='docs-page__container-block--border-width'>
53
+ <h3 className="docs-page__h3">Border Width</h3>
54
+ <p className='docs-page__paragraph'>
55
+ Utilities classes for overriding the border width of an element. Options are limited to common use cases.
56
+ </p>
57
+ <div className="utilities-table__container utilities-table__container--no-height">
58
+ <table className="table utilities-table">
59
+ <thead>
60
+ <tr>
61
+ <th>Class</th>
62
+ <th>Properties</th>
63
+ </tr>
64
+ </thead>
65
+ <tbody>
66
+ <tr>
67
+ <td>border-0</td>
68
+ <td>{'border-width: 0px;'}</td>
69
+ </tr>
70
+ <tr>
71
+ <td>border-1</td>
72
+ <td>{'border-width: 1px;'}</td>
73
+ </tr>
74
+ <tr>
75
+ <td>border-2</td>
76
+ <td>{'border-width: 2px;'}</td>
77
+ </tr>
78
+ <tr>
79
+ <td>border-3</td>
80
+ <td>{'border-width: 2px;'}</td>
81
+ </tr>
82
+ <tr>
83
+ <td>border-4</td>
84
+ <td>{'border-width: 4px;'}</td>
85
+ </tr>
86
+ <tr>
87
+ <td>border-x-0</td>
88
+ <td>
89
+ {'border-inline-start-width: 0px;'}<br />
90
+ {'border-inline-end-width: 0px;'}
91
+
92
+ </td>
93
+ </tr>
94
+ <tr>
95
+ <td>border-y-0</td>
96
+ <td>
97
+ {'border-block-start-width: 0px;'}<br />
98
+ {'border-block-end-width: 0px;'}
99
+ </td>
100
+ </tr>
101
+ <tr>
102
+ <td>border-s-0</td>
103
+ <td>
104
+ {'border-inline-start-width: 0px;'}
105
+ </td>
106
+ </tr>
107
+ <tr>
108
+ <td>border-e-0</td>
109
+ <td>
110
+ {'border-inline-end-width: 0px;'}
111
+ </td>
112
+ </tr>
113
+ <tr>
114
+ <td>border-t-0</td>
115
+ <td>
116
+ {'border-top: 0px;'}
117
+ </td>
118
+ </tr>
119
+ <tr>
120
+ <td>border-b-0</td>
121
+ <td>
122
+ {'border-bottom: 0px;'}
123
+ </td>
124
+ </tr>
125
+ </tbody>
126
+ </table>
127
+ </div>
128
+ </div>
129
+
130
+ <div className='docs-page__container-block--border-style'>
131
+ <h3 className="docs-page__h3">Border Style</h3>
132
+ <p className='docs-page__paragraph'>
133
+ Utilities classes for overriding the border style of an element.
134
+ </p>
135
+ <div className="utilities-table__container utilities-table__container--no-height">
136
+ <table className="table utilities-table">
137
+ <thead>
138
+ <tr>
139
+ <th>Class</th>
140
+ <th>Properties</th>
141
+ </tr>
142
+ </thead>
143
+ <tbody>
144
+ <tr>
145
+ <td>border-solid</td>
146
+ <td>{'border-style: solid;'}</td>
147
+ </tr>
148
+ <tr>
149
+ <td>border-dotted</td>
150
+ <td>{'border-style: dotted;'}</td>
151
+ </tr>
152
+ <tr>
153
+ <td>border-dashed</td>
154
+ <td>{'border-style: dashed;'}</td>
155
+ </tr>
156
+ <tr>
157
+ <td>border-double</td>
158
+ <td>{'border-style: double;'}</td>
159
+ </tr>
160
+ </tbody>
161
+ </table>
162
+ </div>
163
+ </div>
164
+
165
+ </section>
166
+ )
167
+ }
168
+ }
169
+
170
+ export { BorderUtilitiesDoc };
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 };