superdesk-ui-framework 3.1.9 → 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 (87) 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-typescript/components/ToggleBox/CustomHeaderToggleBox.tsx +56 -0
  8. package/app-typescript/components/{Togglebox.tsx → ToggleBox/SimpleToggleBox.tsx} +3 -14
  9. package/app-typescript/components/ToggleBox/index.tsx +41 -0
  10. package/app-typescript/components/TreeMenu.tsx +4 -2
  11. package/app-typescript/index.ts +1 -1
  12. package/dist/components/Alerts.tsx +1 -1
  13. package/dist/components/ContentDivider.tsx +1 -1
  14. package/dist/components/DragHandleDocs.tsx +2 -2
  15. package/dist/components/Index.tsx +105 -50
  16. package/dist/components/Panel.tsx +13 -13
  17. package/dist/components/Tags.tsx +2 -2
  18. package/dist/components/Togglebox.tsx +154 -15
  19. package/dist/components/utilities/BorderRadiusUtilities.tsx +56 -0
  20. package/dist/components/utilities/BorderUtilities.tsx +170 -0
  21. package/dist/components/utilities/DisplayUtilities.tsx +116 -0
  22. package/dist/components/utilities/FlexAndGridUtilities.tsx +551 -0
  23. package/dist/components/utilities/ObjectFitUtilities.tsx +53 -0
  24. package/dist/components/utilities/ObjectPositionUtilities.tsx +68 -0
  25. package/dist/components/utilities/OpacityUtilities.tsx +64 -0
  26. package/dist/components/utilities/OverflowUtilities.tsx +93 -0
  27. package/dist/components/utilities/PositionUtilities.tsx +52 -0
  28. package/dist/components/utilities/ShadowUtilities.tsx +123 -0
  29. package/dist/components/utilities/SpacingUtilities.tsx +2 -2
  30. package/dist/components/utilities/TextUtilities.tsx +44 -4
  31. package/dist/components.html +2 -4
  32. package/dist/components_deprecated/modals.html +2 -2
  33. package/dist/components_deprecated.html +1 -0
  34. package/dist/design-patterns/Index.tsx +1 -42
  35. package/dist/design-patterns.html +2 -4
  36. package/dist/design.html +1 -0
  37. package/dist/examples.bundle.css +15 -7
  38. package/dist/examples.bundle.js +3104 -1270
  39. package/dist/main.html +1 -0
  40. package/dist/playgrounds/react-playgrounds/Rundowns.tsx +1 -1
  41. package/dist/playgrounds/react-playgrounds/TestGround.tsx +214 -2
  42. package/dist/playgrounds.html +1 -0
  43. package/dist/superdesk-ui.bundle.css +1325 -999
  44. package/dist/superdesk-ui.bundle.js +1094 -919
  45. package/dist/vendor.bundle.js +13 -13
  46. package/examples/css/docs-page.css +15 -7
  47. package/examples/js/doc.js +13 -1
  48. package/examples/pages/components/Alerts.tsx +1 -1
  49. package/examples/pages/components/ContentDivider.tsx +1 -1
  50. package/examples/pages/components/DragHandleDocs.tsx +2 -2
  51. package/examples/pages/components/Index.tsx +105 -50
  52. package/examples/pages/components/Panel.tsx +13 -13
  53. package/examples/pages/components/Tags.tsx +2 -2
  54. package/examples/pages/components/Togglebox.tsx +154 -15
  55. package/examples/pages/components/utilities/BorderRadiusUtilities.tsx +56 -0
  56. package/examples/pages/components/utilities/BorderUtilities.tsx +170 -0
  57. package/examples/pages/components/utilities/DisplayUtilities.tsx +116 -0
  58. package/examples/pages/components/utilities/FlexAndGridUtilities.tsx +551 -0
  59. package/examples/pages/components/utilities/ObjectFitUtilities.tsx +53 -0
  60. package/examples/pages/components/utilities/ObjectPositionUtilities.tsx +68 -0
  61. package/examples/pages/components/utilities/OpacityUtilities.tsx +64 -0
  62. package/examples/pages/components/utilities/OverflowUtilities.tsx +93 -0
  63. package/examples/pages/components/utilities/PositionUtilities.tsx +52 -0
  64. package/examples/pages/components/utilities/ShadowUtilities.tsx +123 -0
  65. package/examples/pages/components/utilities/SpacingUtilities.tsx +2 -2
  66. package/examples/pages/components/utilities/TextUtilities.tsx +44 -4
  67. package/examples/pages/components.html +2 -4
  68. package/examples/pages/components_deprecated/modals.html +2 -2
  69. package/examples/pages/components_deprecated.html +1 -0
  70. package/examples/pages/design-patterns/Index.tsx +1 -42
  71. package/examples/pages/design-patterns.html +2 -4
  72. package/examples/pages/design.html +1 -0
  73. package/examples/pages/main.html +1 -0
  74. package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +1 -1
  75. package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +214 -2
  76. package/examples/pages/playgrounds.html +1 -0
  77. package/package.json +1 -1
  78. package/react/components/ToggleBox/CustomHeaderToggleBox.d.ts +11 -0
  79. package/react/components/ToggleBox/CustomHeaderToggleBox.js +78 -0
  80. package/react/components/ToggleBox/SimpleToggleBox.d.ts +18 -0
  81. package/react/components/{Togglebox.js → ToggleBox/SimpleToggleBox.js} +7 -7
  82. package/react/components/ToggleBox/index.d.ts +26 -0
  83. package/react/components/ToggleBox/index.js +71 -0
  84. package/react/components/TreeMenu.js +4 -2
  85. package/react/index.d.ts +1 -1
  86. package/react/index.js +2 -2
  87. package/react/components/Togglebox.d.ts +0 -28
@@ -0,0 +1,53 @@
1
+ import * as React from 'react';
2
+ import * as Markup from '../../../js/react';
3
+
4
+ class ObjectFitUtilitiesDoc extends React.Component {
5
+ render() {
6
+ return (
7
+ <section className="docs-page__container">
8
+ <h2 className="docs-page__h2">Object Fit</h2>
9
+ <p className="docs-page__paragraph">
10
+ Utilities for managing how a replaced element's content should be resized.
11
+ </p>
12
+ <div className='docs-page__container-block--object-fit'>
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>object-contain</td>
24
+ <td>{'object-fit: 0;'}</td>
25
+ </tr>
26
+ <tr>
27
+ <td>object-cover</td>
28
+ <td>{'object-fit: cover;'}</td>
29
+ </tr>
30
+ <tr>
31
+ <td>object-fill</td>
32
+ <td>{'object-fit: fill;'}</td>
33
+ </tr>
34
+ <tr>
35
+ <td>object-none</td>
36
+ <td>{'object-fit: none;'}</td>
37
+ </tr>
38
+ <tr>
39
+ <td>object-scale-down</td>
40
+ <td>{'object-fit: scale-down;'}</td>
41
+ </tr>
42
+
43
+ </tbody>
44
+ </table>
45
+ </div>
46
+ </div>
47
+
48
+ </section>
49
+ )
50
+ }
51
+ }
52
+
53
+ export { ObjectFitUtilitiesDoc };
@@ -0,0 +1,68 @@
1
+ import * as React from 'react';
2
+ import * as Markup from '../../../js/react';
3
+
4
+ class ObjectPositionUtilitiesDoc extends React.Component {
5
+ render() {
6
+ return (
7
+ <section className="docs-page__container">
8
+ <h2 className="docs-page__h2">Object Position</h2>
9
+ <p className="docs-page__paragraph">
10
+ Utilities for managing how a replaced element's content should be positioned within its container.
11
+ </p>
12
+ <div className='docs-page__container-block--object-position'>
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>object-bottom</td>
24
+ <td>{'object-position: bottom;'}</td>
25
+ </tr>
26
+ <tr>
27
+ <td>object-center</td>
28
+ <td>{'object-position: center;'}</td>
29
+ </tr>
30
+ <tr>
31
+ <td>object-left</td>
32
+ <td>{'object-position: left;'}</td>
33
+ </tr>
34
+ <tr>
35
+ <td>object-left-bottom</td>
36
+ <td>{'object-position: left bottom;'}</td>
37
+ </tr>
38
+ <tr>
39
+ <td>object-left-top</td>
40
+ <td>{'object-position: left top;'}</td>
41
+ </tr>
42
+ <tr>
43
+ <td>object-right</td>
44
+ <td>{'object-position: right;'}</td>
45
+ </tr>
46
+ <tr>
47
+ <td>object-right-bottom </td>
48
+ <td>{'object-position: right bottom;'}</td>
49
+ </tr>
50
+ <tr>
51
+ <td>object-right-top</td>
52
+ <td>{'object-position: right top;'}</td>
53
+ </tr>
54
+ <tr>
55
+ <td>object-top</td>
56
+ <td>{'object-position: top;'}</td>
57
+ </tr>
58
+ </tbody>
59
+ </table>
60
+ </div>
61
+ </div>
62
+
63
+ </section>
64
+ )
65
+ }
66
+ }
67
+
68
+ export { ObjectPositionUtilitiesDoc };
@@ -0,0 +1,64 @@
1
+ import * as React from 'react';
2
+ import * as Markup from '../../../js/react';
3
+
4
+ class OpacityUtilitiesDoc extends React.Component {
5
+ render() {
6
+ return (
7
+ <section className="docs-page__container">
8
+ <h2 className="docs-page__h2">Opacity</h2>
9
+ <p className="docs-page__paragraph">
10
+ Utility classes for controlling the opacity of an element.
11
+ </p>
12
+ <div className='docs-page__container-block--opacity'>
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>opacity-0</td>
24
+ <td>{'opacity: 0;'}</td>
25
+ </tr>
26
+ <tr>
27
+ <td>opacity-20</td>
28
+ <td>{'opacity: 0.2;'}</td>
29
+ </tr>
30
+ <tr>
31
+ <td>opacity-25</td>
32
+ <td>{'opacity: 0.25;'}</td>
33
+ </tr>
34
+ <tr>
35
+ <td>opacity-30</td>
36
+ <td>{'opacity: 0.3;'}</td>
37
+ </tr>
38
+ <tr>
39
+ <td>opacity-40</td>
40
+ <td>{'opacity: 0.4;'}</td>
41
+ </tr>
42
+ <tr>
43
+ <td>opacity-50</td>
44
+ <td>{'opacity: 0.5;'}</td>
45
+ </tr>
46
+ <tr>
47
+ <td>opacity-60</td>
48
+ <td>{'opacity: 0.6;'}</td>
49
+ </tr>
50
+ <tr>
51
+ <td>opacity-75</td>
52
+ <td>{'opacity: 0.75;'}</td>
53
+ </tr>
54
+ </tbody>
55
+ </table>
56
+ </div>
57
+ </div>
58
+
59
+ </section>
60
+ )
61
+ }
62
+ }
63
+
64
+ export { OpacityUtilitiesDoc };
@@ -0,0 +1,93 @@
1
+ import * as React from 'react';
2
+ import * as Markup from '../../../js/react';
3
+
4
+ class OverflowUtilitiesDoc extends React.Component {
5
+ render() {
6
+ return (
7
+ <section className="docs-page__container">
8
+ <h2 className="docs-page__h2">Overflow</h2>
9
+ <p className="docs-page__paragraph">
10
+ Utility classes for managing how an element deals with content that exceeds the container's size.
11
+ </p>
12
+ <div className='docs-page__container-block--position'>
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>overflow-auto</td>
24
+ <td>{'overflow: auto !important;'}</td>
25
+ </tr>
26
+ <tr>
27
+ <td>overflow-hidden</td>
28
+ <td>{'overflow: hidden !important;'}</td>
29
+ </tr>
30
+ <tr>
31
+ <td>overflow-scroll</td>
32
+ <td>{'overflow: scroll !important;'}</td>
33
+ </tr>
34
+ <tr>
35
+ <td>overflow-visible</td>
36
+ <td>{'overflow: visible !important;'}</td>
37
+ </tr>
38
+ <tr>
39
+ <td>overflow-clip</td>
40
+ <td>{'overflow: clip !important;'}</td>
41
+ </tr>
42
+
43
+ <tr>
44
+ <td>overflow-x-auto</td>
45
+ <td>{'overflow-x: auto !important;'}</td>
46
+ </tr>
47
+ <tr>
48
+ <td>overflow-y-auto</td>
49
+ <td>{'overflow-y: auto !important;'}</td>
50
+ </tr>
51
+ <tr>
52
+ <td>overflow-x-hidden</td>
53
+ <td>{'overflow-x: hidden !important;'}</td>
54
+ </tr>
55
+ <tr>
56
+ <td>overflow-y-hidden</td>
57
+ <td>{'overflow-y: hidden !important;'}</td>
58
+ </tr>
59
+ <tr>
60
+ <td>overflow-x-scroll</td>
61
+ <td>{'overflow-x: scroll !important;'}</td>
62
+ </tr>
63
+ <tr>
64
+ <td>overflow-y-scroll</td>
65
+ <td>{'overflow-y: scroll !important;'}</td>
66
+ </tr>
67
+ <tr>
68
+ <td>overflow-x-visible</td>
69
+ <td>{'overflow-x: visible !important;'}</td>
70
+ </tr>
71
+ <tr>
72
+ <td>overflow-y-visible</td>
73
+ <td>{'overflow-y: visible !important;'}</td>
74
+ </tr>
75
+ <tr>
76
+ <td>overflow-x-clip</td>
77
+ <td>{'overflow-x: clip !important;'}</td>
78
+ </tr>
79
+ <tr>
80
+ <td>overflow-y-clip</td>
81
+ <td>{'overflow-y: clip !important;'}</td>
82
+ </tr>
83
+ </tbody>
84
+ </table>
85
+ </div>
86
+ </div>
87
+
88
+ </section>
89
+ )
90
+ }
91
+ }
92
+
93
+ export { OverflowUtilitiesDoc };
@@ -0,0 +1,52 @@
1
+ import * as React from 'react';
2
+ import * as Markup from '../../../js/react';
3
+
4
+ class PositionUtilitiesDoc extends React.Component {
5
+ render() {
6
+ return (
7
+ <section className="docs-page__container">
8
+ <h2 className="docs-page__h2">Position</h2>
9
+ <p className="docs-page__paragraph">
10
+ Utility classes for managing the placement of an element within the DOM.
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>p-static</td>
24
+ <td>{'position: static;'}</td>
25
+ </tr>
26
+ <tr>
27
+ <td>p-fixed</td>
28
+ <td>{'position: fixed;'}</td>
29
+ </tr>
30
+ <tr>
31
+ <td>p-absolute</td>
32
+ <td>{'position: absolute;'}</td>
33
+ </tr>
34
+ <tr>
35
+ <td>p-relative</td>
36
+ <td>{'position: relative;'}</td>
37
+ </tr>
38
+ <tr>
39
+ <td>p-sticky</td>
40
+ <td>{'position: sticky;'}</td>
41
+ </tr>
42
+ </tbody>
43
+ </table>
44
+ </div>
45
+ </div>
46
+
47
+ </section>
48
+ )
49
+ }
50
+ }
51
+
52
+ export { PositionUtilitiesDoc };
@@ -0,0 +1,123 @@
1
+ import * as React from 'react';
2
+ import * as Markup from '../../../js/react';
3
+
4
+ class ShadowUtilitiesDoc extends React.Component {
5
+ render() {
6
+ return (
7
+ <section className="docs-page__container">
8
+ <h2 className="docs-page__h2">Shadow</h2>
9
+ <p className="docs-page__paragraph">
10
+ Utility classes for managing the shadow depth of an element.
11
+ </p>
12
+
13
+ <div className='docs-page__container-block--box-shadow'>
14
+ <h3 className="docs-page__h3">box-shadow</h3>
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>sd-shadow--z1</td>
26
+ <td>{'box-shadow: var(--sd-shadow--z1);'}</td>
27
+ </tr>
28
+ <tr>
29
+ <td>sd-shadow--z2</td>
30
+ <td>{'box-shadow: var(--sd-shadow--z2);'}</td>
31
+ </tr>
32
+ <tr>
33
+ <td>sd-shadow--z3</td>
34
+ <td>{'box-shadow: var(--sd-shadow--z3);'}</td>
35
+ </tr>
36
+ <tr>
37
+ <td>sd-shadow--z4</td>
38
+ <td>{'box-shadow: var(--sd-shadow--z4);'}</td>
39
+ </tr>
40
+ <tr>
41
+ <td>sd-shadow--none</td>
42
+ <td>{'box-shadow: none;'}</td>
43
+ </tr>
44
+ </tbody>
45
+ </table>
46
+ </div>
47
+ <div className='docs-page__container-block'>
48
+ <h4 className="docs-page__h4">Usage</h4>
49
+ <div className="docs-page__code-window">
50
+ <div className="sd-grid-list">
51
+ <div className="docs-page__example-box sd-shadow--z1">
52
+ <p>sd-shadow--z1</p>
53
+ </div>
54
+ <div className="docs-page__example-box sd-shadow--z2">
55
+ <p>sd-shadow--z2</p>
56
+ </div>
57
+ <div className="docs-page__example-box sd-shadow--z3">
58
+ <p>sd-shadow--z3</p>
59
+ </div>
60
+ <div className="docs-page__example-box sd-shadow--z4">
61
+ <p>sd-shadow--z4</p>
62
+ </div>
63
+
64
+ </div>
65
+ </div>
66
+ </div>
67
+ </div>
68
+
69
+ <div className='docs-page__container-block--drop-shadow'>
70
+ <h3 className="docs-page__h3">drop-shadow filter</h3>
71
+ <p className="docs-page__paragraph">
72
+ These helper classes utilize the <code>drop-shadow</code> filter. Use them exclusively to apply a shadow to an element that doesn't correspond to its bounding box, but instead uses the element's alpha mask, such as transparent PNG or SVG. For all other situations, it is recommended to use the above classes, based on the <code>box-shadow</code> property.
73
+ </p>
74
+ <div className="utilities-table__container">
75
+ <table className="table utilities-table">
76
+ <thead>
77
+ <tr>
78
+ <th>Class</th>
79
+ <th>Properties</th>
80
+ </tr>
81
+ </thead>
82
+ <tbody>
83
+ <tr>
84
+ <td>sd-drop-shadow--z1</td>
85
+ <td>{'filter: var(--sd-drop-shadow--z1);'}</td>
86
+ </tr>
87
+ <tr>
88
+ <td>sd-drop-shadow--z2</td>
89
+ <td>{'filter: var(--sd-drop-shadow--z2);'}</td>
90
+ </tr>
91
+ <tr>
92
+ <td>sd-drop-shadow--z3</td>
93
+ <td>{'filter: var(--sd-drop-shadow--z3);'}</td>
94
+ </tr>
95
+ <tr>
96
+ <td>sd-drop-shadow--z4</td>
97
+ <td>{'filter: var(--sd-drop-shadow--z4);'}</td>
98
+ </tr>
99
+ <tr>
100
+ <td>sd-drop-shadow--none</td>
101
+ <td>{'filter: var(--sd-drop-shadow--none);'}</td>
102
+ </tr>
103
+ </tbody>
104
+ </table>
105
+ </div>
106
+ </div>
107
+
108
+ <div className='docs-page__container-block--drop-shadow'>
109
+ <h4 className="docs-page__h4">Basic usage</h4>
110
+ <div className="docs-page__code-window docs-page__example-box">
111
+ <div className="p-4">
112
+ <p className="text-md font-light text-color-subdued mb-2">sd-drop-shadow--z3</p>
113
+ <img className='sd-drop-shadow--z3' width={300} src='./SD-logo.svg' />
114
+ </div>
115
+ </div>
116
+ </div>
117
+
118
+ </section>
119
+ )
120
+ }
121
+ }
122
+
123
+ export { ShadowUtilitiesDoc };
@@ -5,7 +5,7 @@ class SpacingUtilitiesDoc extends React.Component {
5
5
  render() {
6
6
  return (
7
7
  <section className="docs-page__container">
8
- <h2 className="docs-page__h2">Spacing Utilities</h2>
8
+ <h2 className="docs-page__h2">Spacing</h2>
9
9
  <p className="docs-page__paragraph">
10
10
  The Superdesk UI Framework provides various spacing utility classes to modify the positioning and look of elements.
11
11
  All values are set in multiples of the <code>--base-increment</code> CSS variable, which is equivalent to 0.8rem (or 8px in our context), to ensure consistency.
@@ -771,4 +771,4 @@ class SpacingUtilitiesDoc extends React.Component {
771
771
  }
772
772
  }
773
773
 
774
- export { SpacingUtilitiesDoc };
774
+ export { SpacingUtilitiesDoc };
@@ -5,7 +5,7 @@ class TextUtilitiesDoc extends React.Component {
5
5
  render() {
6
6
  return (
7
7
  <section className="docs-page__container">
8
- <h2 className="docs-page__h2">Text Utilities</h2>
8
+ <h2 className="docs-page__h2">Text</h2>
9
9
 
10
10
  <div className='docs-page__container-block--font-size'>
11
11
  <h3 className="docs-page__h3">Font Size</h3>
@@ -23,7 +23,7 @@ class TextUtilitiesDoc extends React.Component {
23
23
  </tr>
24
24
  </thead>
25
25
  <tbody>
26
- <tr>
26
+ <tr>
27
27
  <td>text-2xs</td>
28
28
  <td>{'font-size: var(--text-size-x-small);'} <span className="doc-text--highlight">/* 10px */</span></td>
29
29
  </tr>
@@ -408,7 +408,7 @@ class TextUtilitiesDoc extends React.Component {
408
408
  <tr>
409
409
  <td>break-normal</td>
410
410
  <td>
411
- {'overflow-wrap: normal;'}
411
+ {'overflow-wrap: normal;'}<br />
412
412
  {'word-break: normal;'}
413
413
  </td>
414
414
  </tr>
@@ -424,9 +424,49 @@ class TextUtilitiesDoc extends React.Component {
424
424
  </table>
425
425
  </div>
426
426
  </div>
427
+
428
+ <div className='docs-page__container-block--whitespace'>
429
+ <h3 className="docs-page__h3">Whitespace</h3>
430
+ <div className="utilities-table__container">
431
+ <table className="table utilities-table">
432
+ <thead>
433
+ <tr>
434
+ <th>Class</th>
435
+ <th>Properties</th>
436
+ </tr>
437
+ </thead>
438
+ <tbody>
439
+ <tr>
440
+ <td>whitespace-normal</td>
441
+ <td>{'white-space: normal;'}</td>
442
+ </tr>
443
+ <tr>
444
+ <td>whitespace-nowrap</td>
445
+ <td>{'white-space: nowrap;'}</td>
446
+ </tr>
447
+ <tr>
448
+ <td>whitespace-pre</td>
449
+ <td>{'white-space: pre;'}</td>
450
+ </tr>
451
+ <tr>
452
+ <td>whitespace-pre-line</td>
453
+ <td>{'white-space: pre-line;'}</td>
454
+ </tr>
455
+ <tr>
456
+ <td>whitespace-pre-wrap</td>
457
+ <td>{'white-space: pre-wrap;'}</td>
458
+ </tr>
459
+ <tr>
460
+ <td>whitespace-break-spaces</td>
461
+ <td>{'white-space: break-spaces;'}</td>
462
+ </tr>
463
+ </tbody>
464
+ </table>
465
+ </div>
466
+ </div>
427
467
  </section>
428
468
  )
429
469
  }
430
470
  }
431
471
 
432
- export { TextUtilitiesDoc };
472
+ export { TextUtilitiesDoc };
@@ -8,10 +8,8 @@
8
8
  <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/design">Design guidelines</a></li>
9
9
  <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/playgrounds">Playground</a></li>
10
10
  </ul>
11
- <button class="docs-page__header-button" aria-label="Change theme" aria-haspopup="menu" aria-expanded="false">
12
- <i role="presentation" class="icon-adjust"></i>
13
- </button>
11
+ <doc-theme-picker></doc-theme-picker>
14
12
  </header>
15
13
 
16
14
 
17
- <doc-react class="sd-wrap-helper"></doc-react>
15
+ <doc-react class="d-contents"></doc-react>
@@ -295,7 +295,7 @@
295
295
  <h3 class="modal__heading">Modal dark (fill option)</h3>
296
296
  <button class="icn-btn" ng-click="closeModal('modalActive9')"><i class="icon-close-small"></i></button>
297
297
  </div>
298
- <div class="sd-wrap-helper">
298
+ <div class="d-contents">
299
299
  <div style="height: 100%;" class="sd-content-wrapper__main-content-area sd-main-content-grid comfort">
300
300
  <div class="sd-main-content-grid__content sd-padding--2">
301
301
  <div class="sd-grid-list">
@@ -376,7 +376,7 @@
376
376
  <h3 class="modal__heading">Modal dark (fill option)</h3>
377
377
  <button class="icn-btn" ng-click="closeModal('modalActive9')"><i class="icon-close-small"></i></button>
378
378
  </div>
379
- <div class="sd-wrap-helper">
379
+ <div class="d-contents">
380
380
  <div style="height: 100%;" class="sd-content-wrapper__main-content-area sd-main-content-grid comfort">
381
381
  <div class="sd-main-content-grid__content sd-padding--2">
382
382
  <div class="sd-grid-list">
@@ -8,6 +8,7 @@
8
8
  <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/design">Design guidelines</a></li>
9
9
  <li class="docs-page__header-nav-item"><a class="docs-page__header-nav-link" href="#/playgrounds">Playground</a></li>
10
10
  </ul>
11
+ <doc-theme-picker></doc-theme-picker>
11
12
  </header>
12
13
 
13
14
  <aside class="docs-page__sidebar">
@@ -26,53 +26,12 @@ const pages = {
26
26
  }
27
27
  },
28
28
  }
29
- interface IProps {
30
- theme?: string;
31
- }
32
- interface IState {
33
- theme: 'dark-ui' | 'light-ui' | string;
34
- }
35
- class DesignPatternsDoc extends React.Component<IProps, IState> {
36
- constructor(props: IProps) {
37
- super(props);
38
- this.state = {
39
- theme: 'light-ui',
40
- }
41
- this.handleTheme = this.handleTheme.bind(this);
42
- }
43
- handleTheme(newTheme: string) {
44
- document.body.setAttribute('data-theme', newTheme);
45
-
46
- this.setState({
47
- theme: newTheme
48
- })
49
- }
50
-
51
- checkTheme(theme: string) {
52
- return this.state.theme === theme;
53
- }
29
+ class DesignPatternsDoc extends React.Component<> {
54
30
  render() {
55
31
  return (
56
32
  <React.Fragment>
57
33
  <ReactNav pages={pages} base="design-patterns" />
58
34
  <main className="docs-page__content docs-page__container-fluid">
59
- <div className="docs-page__fla-button-container">
60
- <Dropdown
61
- items={[
62
- {
63
- type: 'group', label: 'Chose a theme', items: [
64
- 'divider',
65
- { label: 'Light', icon: 'adjust', active: this.checkTheme('light-ui'), onSelect: () => this.handleTheme('light-ui') },
66
- { label: 'Dark', icon: 'adjust', active: this.checkTheme('dark-ui'), onSelect: () => this.handleTheme('dark-ui') },
67
- { label: 'Accessible Light', active: this.checkTheme('accessible-light-ui'), icon: 'adjust', onSelect: () => this.handleTheme('accessible-light-ui') },
68
- ]
69
- },
70
- ]}>
71
- <button className="docs-page__fla-button" aria-label="Change theme" onClick={() => false}>
72
- <i className="icon-adjust"></i>
73
- </button>
74
- </Dropdown>
75
- </div>
76
35
  <Switch>
77
36
  <Route path="/design-patterns/three-pane-layout" component={ThreePaneLayoutPattern} />
78
37
  <Route path="/" component={PatternsDefault} />