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.
- package/app/styles/_helpers.scss +913 -780
- package/app/styles/_master-desk.scss +2 -2
- package/app/styles/components/_sd-collapse-box.scss +113 -0
- package/app/styles/components/_subnav.scss +0 -1
- package/app/styles/design-tokens/_design-tokens-general.scss +19 -5
- package/app/styles/design-tokens/_new-colors.scss +11 -1
- package/app-typescript/components/ToggleBox/CustomHeaderToggleBox.tsx +56 -0
- package/app-typescript/components/{Togglebox.tsx → ToggleBox/SimpleToggleBox.tsx} +3 -14
- package/app-typescript/components/ToggleBox/index.tsx +41 -0
- package/app-typescript/components/TreeMenu.tsx +4 -2
- package/app-typescript/index.ts +1 -1
- package/dist/components/Alerts.tsx +1 -1
- package/dist/components/ContentDivider.tsx +1 -1
- package/dist/components/DragHandleDocs.tsx +2 -2
- package/dist/components/Index.tsx +105 -50
- package/dist/components/Panel.tsx +13 -13
- package/dist/components/Tags.tsx +2 -2
- package/dist/components/Togglebox.tsx +154 -15
- package/dist/components/utilities/BorderRadiusUtilities.tsx +56 -0
- package/dist/components/utilities/BorderUtilities.tsx +170 -0
- package/dist/components/utilities/DisplayUtilities.tsx +116 -0
- package/dist/components/utilities/FlexAndGridUtilities.tsx +551 -0
- package/dist/components/utilities/ObjectFitUtilities.tsx +53 -0
- package/dist/components/utilities/ObjectPositionUtilities.tsx +68 -0
- package/dist/components/utilities/OpacityUtilities.tsx +64 -0
- package/dist/components/utilities/OverflowUtilities.tsx +93 -0
- package/dist/components/utilities/PositionUtilities.tsx +52 -0
- package/dist/components/utilities/ShadowUtilities.tsx +123 -0
- package/dist/components/utilities/SpacingUtilities.tsx +2 -2
- package/dist/components/utilities/TextUtilities.tsx +44 -4
- package/dist/components.html +2 -4
- package/dist/components_deprecated/modals.html +2 -2
- package/dist/components_deprecated.html +1 -0
- package/dist/design-patterns/Index.tsx +1 -42
- package/dist/design-patterns.html +2 -4
- package/dist/design.html +1 -0
- package/dist/examples.bundle.css +15 -7
- package/dist/examples.bundle.js +3104 -1270
- package/dist/main.html +1 -0
- package/dist/playgrounds/react-playgrounds/Rundowns.tsx +1 -1
- package/dist/playgrounds/react-playgrounds/TestGround.tsx +214 -2
- package/dist/playgrounds.html +1 -0
- package/dist/superdesk-ui.bundle.css +1325 -999
- package/dist/superdesk-ui.bundle.js +1094 -919
- package/dist/vendor.bundle.js +13 -13
- package/examples/css/docs-page.css +15 -7
- package/examples/js/doc.js +13 -1
- package/examples/pages/components/Alerts.tsx +1 -1
- package/examples/pages/components/ContentDivider.tsx +1 -1
- package/examples/pages/components/DragHandleDocs.tsx +2 -2
- package/examples/pages/components/Index.tsx +105 -50
- package/examples/pages/components/Panel.tsx +13 -13
- package/examples/pages/components/Tags.tsx +2 -2
- package/examples/pages/components/Togglebox.tsx +154 -15
- package/examples/pages/components/utilities/BorderRadiusUtilities.tsx +56 -0
- package/examples/pages/components/utilities/BorderUtilities.tsx +170 -0
- package/examples/pages/components/utilities/DisplayUtilities.tsx +116 -0
- package/examples/pages/components/utilities/FlexAndGridUtilities.tsx +551 -0
- package/examples/pages/components/utilities/ObjectFitUtilities.tsx +53 -0
- package/examples/pages/components/utilities/ObjectPositionUtilities.tsx +68 -0
- package/examples/pages/components/utilities/OpacityUtilities.tsx +64 -0
- package/examples/pages/components/utilities/OverflowUtilities.tsx +93 -0
- package/examples/pages/components/utilities/PositionUtilities.tsx +52 -0
- package/examples/pages/components/utilities/ShadowUtilities.tsx +123 -0
- package/examples/pages/components/utilities/SpacingUtilities.tsx +2 -2
- package/examples/pages/components/utilities/TextUtilities.tsx +44 -4
- package/examples/pages/components.html +2 -4
- package/examples/pages/components_deprecated/modals.html +2 -2
- package/examples/pages/components_deprecated.html +1 -0
- package/examples/pages/design-patterns/Index.tsx +1 -42
- package/examples/pages/design-patterns.html +2 -4
- package/examples/pages/design.html +1 -0
- package/examples/pages/main.html +1 -0
- package/examples/pages/playgrounds/react-playgrounds/Rundowns.tsx +1 -1
- package/examples/pages/playgrounds/react-playgrounds/TestGround.tsx +214 -2
- package/examples/pages/playgrounds.html +1 -0
- package/package.json +1 -1
- package/react/components/ToggleBox/CustomHeaderToggleBox.d.ts +11 -0
- package/react/components/ToggleBox/CustomHeaderToggleBox.js +78 -0
- package/react/components/ToggleBox/SimpleToggleBox.d.ts +18 -0
- package/react/components/{Togglebox.js → ToggleBox/SimpleToggleBox.js} +7 -7
- package/react/components/ToggleBox/index.d.ts +26 -0
- package/react/components/ToggleBox/index.js +71 -0
- package/react/components/TreeMenu.js +4 -2
- package/react/index.d.ts +1 -1
- package/react/index.js +2 -2
- package/react/components/Togglebox.d.ts +0 -28
package/dist/vendor.bundle.js
CHANGED
@@ -70,7 +70,7 @@ return /******/ (function(modules) { // webpackBootstrap
|
|
70
70
|
/******/ __webpack_require__.p = "";
|
71
71
|
/******/
|
72
72
|
/******/ // Load entry module and return exports
|
73
|
-
/******/ return __webpack_require__(__webpack_require__.s =
|
73
|
+
/******/ return __webpack_require__(__webpack_require__.s = 800);
|
74
74
|
/******/ })
|
75
75
|
/************************************************************************/
|
76
76
|
/******/ ({
|
@@ -28246,7 +28246,7 @@ return jQuery;
|
|
28246
28246
|
|
28247
28247
|
/***/ }),
|
28248
28248
|
|
28249
|
-
/***/
|
28249
|
+
/***/ 800:
|
28250
28250
|
/***/ (function(module, exports, __webpack_require__) {
|
28251
28251
|
|
28252
28252
|
"use strict";
|
@@ -28256,19 +28256,19 @@ __webpack_require__(24);
|
|
28256
28256
|
|
28257
28257
|
__webpack_require__(57);
|
28258
28258
|
|
28259
|
-
__webpack_require__(799);
|
28260
|
-
|
28261
28259
|
__webpack_require__(801);
|
28262
28260
|
|
28263
28261
|
__webpack_require__(803);
|
28264
28262
|
|
28263
|
+
__webpack_require__(805);
|
28264
|
+
|
28265
28265
|
__webpack_require__(0);
|
28266
28266
|
|
28267
28267
|
__webpack_require__(9);
|
28268
28268
|
|
28269
28269
|
/***/ }),
|
28270
28270
|
|
28271
|
-
/***/
|
28271
|
+
/***/ 801:
|
28272
28272
|
/***/ (function(module, exports, __webpack_require__) {
|
28273
28273
|
|
28274
28274
|
var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
|
@@ -28292,7 +28292,7 @@ var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_
|
|
28292
28292
|
if ( true ) {
|
28293
28293
|
|
28294
28294
|
// AMD. Register as an anonymous module.
|
28295
|
-
!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(57), __webpack_require__(
|
28295
|
+
!(__WEBPACK_AMD_DEFINE_ARRAY__ = [ __webpack_require__(57), __webpack_require__(802) ], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
|
28296
28296
|
__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
|
28297
28297
|
(__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
|
28298
28298
|
__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
|
@@ -29030,7 +29030,7 @@ return $.widget;
|
|
29030
29030
|
|
29031
29031
|
/***/ }),
|
29032
29032
|
|
29033
|
-
/***/
|
29033
|
+
/***/ 802:
|
29034
29034
|
/***/ (function(module, exports, __webpack_require__) {
|
29035
29035
|
|
29036
29036
|
var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;( function( factory ) {
|
@@ -29060,16 +29060,16 @@ return $.ui.version = "1.13.0";
|
|
29060
29060
|
|
29061
29061
|
/***/ }),
|
29062
29062
|
|
29063
|
-
/***/
|
29063
|
+
/***/ 803:
|
29064
29064
|
/***/ (function(module, exports, __webpack_require__) {
|
29065
29065
|
|
29066
|
-
__webpack_require__(
|
29066
|
+
__webpack_require__(804);
|
29067
29067
|
module.exports = angular;
|
29068
29068
|
|
29069
29069
|
|
29070
29070
|
/***/ }),
|
29071
29071
|
|
29072
|
-
/***/
|
29072
|
+
/***/ 804:
|
29073
29073
|
/***/ (function(module, exports, __webpack_require__) {
|
29074
29074
|
|
29075
29075
|
/* WEBPACK VAR INJECTION */(function(__webpack_provided_window_dot_jQuery) {/**
|
@@ -65676,16 +65676,16 @@ $provide.value("$locale", {
|
|
65676
65676
|
|
65677
65677
|
/***/ }),
|
65678
65678
|
|
65679
|
-
/***/
|
65679
|
+
/***/ 805:
|
65680
65680
|
/***/ (function(module, exports, __webpack_require__) {
|
65681
65681
|
|
65682
|
-
__webpack_require__(
|
65682
|
+
__webpack_require__(806);
|
65683
65683
|
module.exports = 'ngAnimate';
|
65684
65684
|
|
65685
65685
|
|
65686
65686
|
/***/ }),
|
65687
65687
|
|
65688
|
-
/***/
|
65688
|
+
/***/ 806:
|
65689
65689
|
/***/ (function(module, exports) {
|
65690
65690
|
|
65691
65691
|
/**
|
@@ -61,12 +61,9 @@
|
|
61
61
|
--docs-page-color-highlight: #33C5A0;
|
62
62
|
}
|
63
63
|
|
64
|
-
|
65
|
-
|
66
|
-
|
67
64
|
hr {
|
68
65
|
border: transparent;
|
69
|
-
border: 1px dotted
|
66
|
+
border: 1px dotted var(--sd-colour-line--medium);
|
70
67
|
border-width: 1px 0 0;
|
71
68
|
margin: 24px 0;
|
72
69
|
}
|
@@ -575,7 +572,7 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
|
|
575
572
|
}
|
576
573
|
.docs-page__code-window {
|
577
574
|
border: 1px solid hsla(0, 0%, 48%, 0.2);
|
578
|
-
border-radius:
|
575
|
+
border-radius: var(--b-radius--large);
|
579
576
|
margin: 10px 0 20px;
|
580
577
|
-webkit-box-shadow: 0 2px 8px hsla(0, 0%, 0%, 0.07);
|
581
578
|
box-shadow: 0 2px 8px hsla(0, 0%, 0%, 0.07);
|
@@ -585,6 +582,7 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
|
|
585
582
|
border-top: 1px solid var(--docs-page-border__window-bar--top);
|
586
583
|
border-bottom: 1px solid var(--docs-page-border__window-bar--bottom);
|
587
584
|
background: var(--docs-page-color-bg__window-bar);
|
585
|
+
border-radius: var(--b-radius--large) var(--b-radius--large) 0 0;
|
588
586
|
}
|
589
587
|
.docs-page__window-bar>a, .docs-page__window-bar>span {
|
590
588
|
font-size: 16px;
|
@@ -643,6 +641,7 @@ p.docs-page__paragraph b, div.docs-page__paragraph b {
|
|
643
641
|
background-color: hsl(214, 13%, 10%);
|
644
642
|
padding: 16px 16px 16px 36px;
|
645
643
|
overflow-y: scroll;
|
644
|
+
border-radius: 0 0 var(--b-radius--large) var(--b-radius--large);
|
646
645
|
}
|
647
646
|
.docs-page__code-markup ol {
|
648
647
|
margin-left: 10px;
|
@@ -1028,7 +1027,7 @@ doc-gif-img:hover img {
|
|
1028
1027
|
color: var(--color-text-light);
|
1029
1028
|
}
|
1030
1029
|
.docs-page__container table.utilities-table tbody td:first-child {
|
1031
|
-
min-width:
|
1030
|
+
min-width: 280px;
|
1032
1031
|
width: auto;
|
1033
1032
|
color: var(--color-text);
|
1034
1033
|
}
|
@@ -1058,10 +1057,19 @@ doc-gif-img:hover img {
|
|
1058
1057
|
margin-block-end: var(--space--4);
|
1059
1058
|
}
|
1060
1059
|
|
1060
|
+
.utilities-table__container--no-height {
|
1061
|
+
max-height: none;
|
1062
|
+
}
|
1063
|
+
|
1061
1064
|
.docs-page__container .doc-text--highlight {
|
1062
1065
|
color: var(--docs-page-color-primary) !important;
|
1063
1066
|
}
|
1064
1067
|
|
1068
|
+
table.utilities-table td .border-example-box {
|
1069
|
+
min-width: 160px;
|
1070
|
+
height: 32px;
|
1071
|
+
}
|
1072
|
+
|
1065
1073
|
/* -------------- END COLOR SWATCHES -------------- */
|
1066
1074
|
/* -------------- PrismJS overrides -------------- */
|
1067
1075
|
|
@@ -1069,7 +1077,7 @@ code[class*="language-"],
|
|
1069
1077
|
pre[class*="language-"] {
|
1070
1078
|
font-family: 'Source Code Pro', Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
1071
1079
|
font-size: 1.1em;
|
1072
|
-
border-radius:
|
1080
|
+
border-radius: var(--b-radius--large);
|
1073
1081
|
}
|
1074
1082
|
pre[class*="language-"] {
|
1075
1083
|
background: hsl(214, 13%, 8%);
|
package/examples/js/doc.js
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
/* eslint-disable */
|
2
2
|
/* global _, PR */
|
3
3
|
|
4
|
-
import { ReactDoc, ReactPlayground } from './../pages/components/Index';
|
4
|
+
import { ReactDoc, ReactPlayground, ReactThemePicker } from './../pages/components/Index';
|
5
5
|
import { DesignPatternsDoc } from './../pages/design-patterns/Index';
|
6
6
|
import { HashRouter } from 'react-router-dom';
|
7
7
|
|
@@ -177,6 +177,17 @@ function docReactPlayground(playgrounds) {
|
|
177
177
|
};
|
178
178
|
}
|
179
179
|
|
180
|
+
docThemePicker.$inject = [];
|
181
|
+
function docThemePicker() {
|
182
|
+
return {
|
183
|
+
link: function (scope, elem) {
|
184
|
+
ReactDOM.render(
|
185
|
+
<ReactThemePicker />, elem[0]
|
186
|
+
)
|
187
|
+
}
|
188
|
+
};
|
189
|
+
}
|
190
|
+
|
180
191
|
docGifImg.$inject = [];
|
181
192
|
function docGifImg() {
|
182
193
|
return {
|
@@ -214,4 +225,5 @@ export default angular.module('ui-docs.directives', [])
|
|
214
225
|
.directive('docReact', docReact)
|
215
226
|
.directive('docDesignPatterns', docDesignPatterns)
|
216
227
|
.directive('docReactPlayground', docReactPlayground)
|
228
|
+
.directive('docThemePicker', docThemePicker)
|
217
229
|
.directive('docGifImg', docGifImg);
|
@@ -142,7 +142,7 @@ export default class AlertDoc extends React.Component {
|
|
142
142
|
This will strip all margins and the border-radius from the component. Hollow style is not recommended in this case, and small size is advised.</p>
|
143
143
|
<Markup.ReactMarkup>
|
144
144
|
<Markup.ReactMarkupPreview>
|
145
|
-
<div className='
|
145
|
+
<div className='d-flex' style={{border: '1px solid var(--sd-colour-line--medium)', backgroundColor: 'var(--sd-colour-panel-bg--100)', maxHeight: '360px'}}>
|
146
146
|
<PanelElements.Panel open={true} side='left' size='small'>
|
147
147
|
<PanelElements.PanelHeader title='Panel example' onClose={()=> false}>
|
148
148
|
<Alert type='warning' icon='exclamation-sign' banner={true} size='small'>
|
@@ -125,7 +125,7 @@ export default class ContentDividerDoc extends React.Component {
|
|
125
125
|
</div>
|
126
126
|
<p className="docs-page__paragraph ">// With text</p>
|
127
127
|
<p className="docs-page__paragraph--small sd-margin-b--3">Inside a flex container (flex-direction: column;).</p>
|
128
|
-
<div className='docs-page__content-row
|
128
|
+
<div className='docs-page__content-row d-flex'>
|
129
129
|
<div style={{width:'100%'}}>
|
130
130
|
Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et
|
131
131
|
magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit
|
@@ -23,7 +23,7 @@ export default class DragHandleDocs extends React.Component {
|
|
23
23
|
offering a wide range of size options.
|
24
24
|
</p>
|
25
25
|
<div className="docs-page__content-row">
|
26
|
-
<div className='
|
26
|
+
<div className='d-flex items-start sd-gap--medium'>
|
27
27
|
<DragHandle dotsInRow='2' dotRows='5' />
|
28
28
|
<DragHandle dotsInRow='2' dotRows='8' />
|
29
29
|
<DragHandle dotsInRow='3' dotRows='6' />
|
@@ -39,7 +39,7 @@ export default class DragHandleDocs extends React.Component {
|
|
39
39
|
To be used within list items, draggable labels, and similar contexts.
|
40
40
|
</p>
|
41
41
|
<div className="docs-page__content-row">
|
42
|
-
<div className='
|
42
|
+
<div className='d-flex items-start sd-gap--medium'>
|
43
43
|
<DragHandle blank={true} />
|
44
44
|
<DragHandle dotsInRow='2' dotRows='10' blank={true} />
|
45
45
|
<DragHandle dotsInRow='4' dotRows='10' blank={true} />
|
@@ -72,8 +72,18 @@ import { ResizablePanelsDoc } from './ResizablePanels';
|
|
72
72
|
import { IllustrationButtonDoc } from './IllustrationButton';
|
73
73
|
|
74
74
|
// Utilities
|
75
|
-
import {SpacingUtilitiesDoc} from './utilities/SpacingUtilities';
|
76
|
-
import {TextUtilitiesDoc} from './utilities/TextUtilities';
|
75
|
+
import { SpacingUtilitiesDoc } from './utilities/SpacingUtilities';
|
76
|
+
import { TextUtilitiesDoc } from './utilities/TextUtilities';
|
77
|
+
import { ShadowUtilitiesDoc } from './utilities/ShadowUtilities';
|
78
|
+
import { PositionUtilitiesDoc } from './utilities/PositionUtilities';
|
79
|
+
import { OverflowUtilitiesDoc } from './utilities/OverflowUtilities';
|
80
|
+
import { DisplayUtilitiesDoc } from './utilities/DisplayUtilities';
|
81
|
+
import { FlexAndGridUtilitiesDoc } from './utilities/FlexAndGridUtilities';
|
82
|
+
import { BorderRadiusUtilitiesDoc } from './utilities/BorderRadiusUtilities';
|
83
|
+
import { BorderUtilitiesDoc } from './utilities/BorderUtilities';
|
84
|
+
import { OpacityUtilitiesDoc } from './utilities/OpacityUtilities';
|
85
|
+
import { ObjectFitUtilitiesDoc } from './utilities/ObjectFitUtilities';
|
86
|
+
import { ObjectPositionUtilitiesDoc } from './utilities/ObjectPositionUtilities';
|
77
87
|
|
78
88
|
const pages = {
|
79
89
|
basicComponents: {
|
@@ -136,7 +146,7 @@ const pages = {
|
|
136
146
|
"drag-handle": {
|
137
147
|
name: 'Drag handle'
|
138
148
|
},
|
139
|
-
"illustration-button"
|
149
|
+
"illustration-button": {
|
140
150
|
name: 'Illustration Button'
|
141
151
|
}
|
142
152
|
}
|
@@ -299,65 +309,52 @@ const pages = {
|
|
299
309
|
utilityClasses: {
|
300
310
|
name: "Utility classes",
|
301
311
|
items: {
|
312
|
+
'border-utilities': {
|
313
|
+
name: 'Border'
|
314
|
+
},
|
315
|
+
'border-radius-utilities': {
|
316
|
+
name: 'Border Radius'
|
317
|
+
},
|
318
|
+
'display-utilities': {
|
319
|
+
name: 'Display'
|
320
|
+
},
|
321
|
+
'flex-and-grid-utilities': {
|
322
|
+
name: 'Flex & Grid'
|
323
|
+
},
|
324
|
+
'object-fit-utilities': {
|
325
|
+
name: 'Object Fit'
|
326
|
+
},
|
327
|
+
'object-position-utilities': {
|
328
|
+
name: 'Object Position'
|
329
|
+
},
|
330
|
+
'opacity-utilities': {
|
331
|
+
name: 'Opacity'
|
332
|
+
},
|
333
|
+
'overflow-utilities': {
|
334
|
+
name: 'Overflow'
|
335
|
+
},
|
336
|
+
'position-utilities': {
|
337
|
+
name: 'Position'
|
338
|
+
},
|
339
|
+
'shadow-utilities': {
|
340
|
+
name: 'Shadow'
|
341
|
+
},
|
302
342
|
'spacing-utilities': {
|
303
|
-
name: 'Spacing
|
343
|
+
name: 'Spacing',
|
304
344
|
},
|
305
345
|
'text-utilities': {
|
306
|
-
name: 'Text
|
346
|
+
name: 'Text'
|
307
347
|
}
|
308
348
|
}
|
309
349
|
}
|
310
350
|
}
|
311
|
-
interface IProps {
|
312
|
-
theme?: string;
|
313
|
-
}
|
314
|
-
interface IState {
|
315
|
-
theme: 'dark-ui' | 'light-ui' | string;
|
316
|
-
}
|
317
|
-
|
318
|
-
class ReactDoc extends React.Component<IProps, IState> {
|
319
|
-
constructor(props: IProps) {
|
320
|
-
super(props);
|
321
|
-
this.state = {
|
322
|
-
theme: 'light-ui',
|
323
|
-
}
|
324
|
-
this.handleTheme = this.handleTheme.bind(this);
|
325
|
-
}
|
326
|
-
|
327
|
-
handleTheme(newTheme: string) {
|
328
|
-
document.body.setAttribute('data-theme', newTheme);
|
329
|
-
|
330
|
-
this.setState({
|
331
|
-
theme: newTheme
|
332
|
-
})
|
333
|
-
}
|
334
|
-
|
335
|
-
checkTheme(theme: string) {
|
336
|
-
return this.state.theme === theme;
|
337
|
-
}
|
338
351
|
|
352
|
+
class ReactDoc extends React.Component {
|
339
353
|
render() {
|
340
354
|
return (
|
341
355
|
<React.Fragment>
|
342
356
|
<ReactNav pages={pages} />
|
343
357
|
<main className="docs-page__content docs-page__container-fluid">
|
344
|
-
<div className="docs-page__fla-button-container">
|
345
|
-
<Dropdown
|
346
|
-
items={[
|
347
|
-
{
|
348
|
-
type: 'group', label: 'Chose a theme', items: [
|
349
|
-
'divider',
|
350
|
-
{ label: 'Light', icon: 'adjust', active: this.checkTheme('light-ui'), onSelect: () => this.handleTheme('light-ui') },
|
351
|
-
{ label: 'Dark', icon: 'adjust', active: this.checkTheme('dark-ui'), onSelect: () => this.handleTheme('dark-ui') },
|
352
|
-
{ label: 'Accessible Light', active: this.checkTheme('accessible-light-ui'), icon: 'adjust', onSelect: () => this.handleTheme('accessible-light-ui') },
|
353
|
-
]
|
354
|
-
},
|
355
|
-
]}>
|
356
|
-
<button className="docs-page__fla-button" aria-label="Change theme" onClick={() => false}>
|
357
|
-
<i className="icon-adjust"></i>
|
358
|
-
</button>
|
359
|
-
</Dropdown>
|
360
|
-
</div>
|
361
358
|
<Switch>
|
362
359
|
<Route path="/components/buttons" component={ButtonsDoc} />
|
363
360
|
<Route path="/components/icon-buttons" component={IconButtonDoc} />
|
@@ -422,6 +419,16 @@ class ReactDoc extends React.Component<IProps, IState> {
|
|
422
419
|
{/* Utilities */}
|
423
420
|
<Route path="/components/spacing-utilities" component={SpacingUtilitiesDoc} />
|
424
421
|
<Route path="/components/text-utilities" component={TextUtilitiesDoc} />
|
422
|
+
<Route path="/components/shadow-utilities" component={ShadowUtilitiesDoc} />
|
423
|
+
<Route path="/components/position-utilities" component={PositionUtilitiesDoc} />
|
424
|
+
<Route path="/components/overflow-utilities" component={OverflowUtilitiesDoc} />
|
425
|
+
<Route path="/components/display-utilities" component={DisplayUtilitiesDoc} />
|
426
|
+
<Route path="/components/flex-and-grid-utilities" component={FlexAndGridUtilitiesDoc} />
|
427
|
+
<Route path="/components/border-radius-utilities" component={BorderRadiusUtilitiesDoc} />
|
428
|
+
<Route path="/components/border-utilities" component={BorderUtilitiesDoc} />
|
429
|
+
<Route path="/components/opacity-utilities" component={OpacityUtilitiesDoc} />
|
430
|
+
<Route path="/components/object-fit-utilities" component={ObjectFitUtilitiesDoc} />
|
431
|
+
<Route path="/components/object-position-utilities" component={ObjectPositionUtilitiesDoc} />
|
425
432
|
<Route path="/" component={ReactDefault} />
|
426
433
|
</Switch>
|
427
434
|
</main>
|
@@ -444,6 +451,54 @@ class ReactPlayground extends React.Component<IProps> {
|
|
444
451
|
}
|
445
452
|
}
|
446
453
|
|
454
|
+
interface IProps {
|
455
|
+
theme?: string;
|
456
|
+
}
|
457
|
+
interface IState {
|
458
|
+
theme: 'dark-ui' | 'light-ui' | string;
|
459
|
+
}
|
460
|
+
class ReactThemePicker extends React.Component<IProps, IState> {
|
461
|
+
constructor(props: IProps) {
|
462
|
+
super(props);
|
463
|
+
this.state = {
|
464
|
+
theme: 'light-ui',
|
465
|
+
}
|
466
|
+
this.handleTheme = this.handleTheme.bind(this);
|
467
|
+
}
|
468
|
+
|
469
|
+
handleTheme(newTheme: string) {
|
470
|
+
document.body.setAttribute('data-theme', newTheme);
|
471
|
+
|
472
|
+
this.setState({
|
473
|
+
theme: newTheme
|
474
|
+
})
|
475
|
+
}
|
476
|
+
|
477
|
+
checkTheme(theme: string) {
|
478
|
+
return this.state.theme === theme;
|
479
|
+
}
|
480
|
+
|
481
|
+
render() {
|
482
|
+
return (
|
483
|
+
<Dropdown
|
484
|
+
items={[
|
485
|
+
{
|
486
|
+
type: 'group', label: 'Chose a theme', items: [
|
487
|
+
'divider',
|
488
|
+
{ label: 'Light', icon: 'adjust', active: this.checkTheme('light-ui'), onSelect: () => this.handleTheme('light-ui') },
|
489
|
+
{ label: 'Dark', icon: 'adjust', active: this.checkTheme('dark-ui'), onSelect: () => this.handleTheme('dark-ui') },
|
490
|
+
{ label: 'Accessible Light', active: this.checkTheme('accessible-light-ui'), icon: 'adjust', onSelect: () => this.handleTheme('accessible-light-ui') },
|
491
|
+
]
|
492
|
+
},
|
493
|
+
]}>
|
494
|
+
<button className="docs-page__header-button" aria-label="Change theme" onClick={() => false}>
|
495
|
+
<i className="icon-adjust"></i>
|
496
|
+
</button>
|
497
|
+
</Dropdown>
|
498
|
+
);
|
499
|
+
}
|
500
|
+
}
|
501
|
+
|
447
502
|
const parsePlayground = ({ match }, playgrounds) => {
|
448
503
|
const Component = Playgrounds[playgrounds[match.params.id].component];
|
449
504
|
return (
|
@@ -451,5 +506,5 @@ const parsePlayground = ({ match }, playgrounds) => {
|
|
451
506
|
);
|
452
507
|
};
|
453
508
|
|
454
|
-
export { ReactDoc, ReactPlayground };
|
509
|
+
export { ReactDoc, ReactPlayground, ReactThemePicker };
|
455
510
|
|
@@ -57,15 +57,15 @@ export default class PanelDoc extends React.Component<IProps, IState> {
|
|
57
57
|
<Markup.ReactMarkup>
|
58
58
|
<Markup.ReactMarkupPreview>
|
59
59
|
<p className="docs-page__paragraph">// Left</p>
|
60
|
-
<div className='
|
60
|
+
<div className='d-flex' style={{border: '1px solid var(--sd-colour-line--medium)', backgroundColor: 'var(--sd-colour-panel-bg--100)', maxHeight: '400px'}}>
|
61
61
|
{this.state.openPanel1 ? null :
|
62
|
-
<div className='
|
62
|
+
<div className='d-flex items-center justify-center sd-flex--grow'>
|
63
63
|
<Button text="Open Panel" style="filled" onClick={() => this.setState({'openPanel1': true})} />
|
64
64
|
</div>
|
65
65
|
}
|
66
66
|
<PanelElements.Panel side='left' background='light' open={this.state.openPanel1} size='x-small'>
|
67
67
|
<PanelElements.PanelHeader
|
68
|
-
title='This is the title
|
68
|
+
title='This is the Panel title'
|
69
69
|
onClose={() => this.setState({'openPanel1': false})}
|
70
70
|
iconButtons={[
|
71
71
|
<Rotate degrees={this.state.rotate ? 90 : 0}>
|
@@ -92,7 +92,7 @@ export default class PanelDoc extends React.Component<IProps, IState> {
|
|
92
92
|
<Markup.ReactMarkupCode>{`
|
93
93
|
// Left
|
94
94
|
{this.state.openPanel1 ? null :
|
95
|
-
<div className='
|
95
|
+
<div className='d-flex items-center justify-center sd-flex--grow'>
|
96
96
|
<Button text="Open Panel" style="filled" onClick={() => this.setState({'openPanel1': true})} />
|
97
97
|
</div>
|
98
98
|
}
|
@@ -130,9 +130,9 @@ export default class PanelDoc extends React.Component<IProps, IState> {
|
|
130
130
|
<Markup.ReactMarkup>
|
131
131
|
<Markup.ReactMarkupPreview>
|
132
132
|
<p className="docs-page__paragraph">// Right, custom elements inside the footer + dark theme.</p>
|
133
|
-
<div className='
|
133
|
+
<div className='d-flex' style={{border: '1px solid var(--sd-colour-line--medium)', backgroundColor: 'var(--sd-colour-panel-bg--100)', maxHeight: '400px'}}>
|
134
134
|
{this.state.openPanel2 ? null :
|
135
|
-
<div className='
|
135
|
+
<div className='d-flex items-center justify-center sd-flex--grow'>
|
136
136
|
<Button text="Open Panel" style="filled" onClick={() => this.setState({'openPanel2': true})} />
|
137
137
|
</div>
|
138
138
|
}
|
@@ -168,7 +168,7 @@ export default class PanelDoc extends React.Component<IProps, IState> {
|
|
168
168
|
// Right, custom elements inside the footer + dark theme.
|
169
169
|
|
170
170
|
{this.state.openPanel2 ? null :
|
171
|
-
<div className='
|
171
|
+
<div className='d-flex items-center justify-center sd-flex--grow'>
|
172
172
|
<Button text="Open Panel" style="filled" onClick={() => this.setState({'openPanel2': true})} />
|
173
173
|
</div>
|
174
174
|
}
|
@@ -201,9 +201,9 @@ export default class PanelDoc extends React.Component<IProps, IState> {
|
|
201
201
|
<Markup.ReactMarkup>
|
202
202
|
<Markup.ReactMarkupPreview>
|
203
203
|
<p className="docs-page__paragraph">// With PanelHeaderSlidingToolbar element inside the PanelHeader</p>
|
204
|
-
<div className='
|
204
|
+
<div className='d-flex' style={{border: '1px solid var(--sd-colour-line--medium)', backgroundColor: 'var(--sd-colour-panel-bg--100)', maxHeight: '400px'}}>
|
205
205
|
{this.state.openPanel3 ? null :
|
206
|
-
<div className='
|
206
|
+
<div className='d-flex items-center justify-center sd-flex--grow'>
|
207
207
|
<Button text="Open Panel" style="filled" onClick={() => this.setState({'openPanel3': true})} />
|
208
208
|
</div>
|
209
209
|
}
|
@@ -245,7 +245,7 @@ export default class PanelDoc extends React.Component<IProps, IState> {
|
|
245
245
|
// With PanelHeaderSlidingToolbar element inside the PanelHeader
|
246
246
|
|
247
247
|
{this.state.openPanel3 ? null :
|
248
|
-
<div className='
|
248
|
+
<div className='d-flex items-center justify-center sd-flex--grow'>
|
249
249
|
<Button text="Open Panel" style="filled" onClick={() => this.setState({'openPanel3': true})} />
|
250
250
|
</div>
|
251
251
|
}
|
@@ -284,9 +284,9 @@ export default class PanelDoc extends React.Component<IProps, IState> {
|
|
284
284
|
<Markup.ReactMarkup>
|
285
285
|
<Markup.ReactMarkupPreview>
|
286
286
|
<p className="docs-page__paragraph">// With PanelTools (allowing custom actions) + dark theme</p>
|
287
|
-
<div className='
|
287
|
+
<div className='d-flex' style={{border: '1px solid var(--sd-colour-line--medium)', backgroundColor: 'var(--sd-colour-panel-bg--100)', maxHeight: '400px'}}>
|
288
288
|
{this.state.openPanel4 ? null :
|
289
|
-
<div className='
|
289
|
+
<div className='d-flex items-center justify-center sd-flex--grow'>
|
290
290
|
<Button text="Open Panel" style="filled" onClick={() => this.setState({'openPanel4': true})} />
|
291
291
|
</div>
|
292
292
|
}
|
@@ -317,7 +317,7 @@ export default class PanelDoc extends React.Component<IProps, IState> {
|
|
317
317
|
// With PanelTools (allowing custom actions) + dark theme
|
318
318
|
|
319
319
|
{this.state.openPanel4 ? null :
|
320
|
-
<div className='
|
320
|
+
<div className='d-flex items-center justify-center sd-flex--grow'>
|
321
321
|
<Button text="Open Panel" style="filled" onClick={() => this.setState({'openPanel4': true})} />
|
322
322
|
</div>
|
323
323
|
}
|
@@ -55,7 +55,7 @@ export default class TagDoc extends React.Component<{}, ITag> {
|
|
55
55
|
|
56
56
|
<Markup.ReactMarkup>
|
57
57
|
<Markup.ReactMarkupPreview>
|
58
|
-
<div className='docs-page__content-row
|
58
|
+
<div className='docs-page__content-row d-flex gap-1'>
|
59
59
|
{this.state.tags.map((tag,index)=>{
|
60
60
|
return (
|
61
61
|
<React.Fragment key={index}>
|
@@ -86,7 +86,7 @@ export default class TagDoc extends React.Component<{}, ITag> {
|
|
86
86
|
|
87
87
|
<Markup.ReactMarkup>
|
88
88
|
<Markup.ReactMarkupPreview>
|
89
|
-
<div className='docs-page__content-row
|
89
|
+
<div className='docs-page__content-row d-flex gap-1'>
|
90
90
|
{this.state.tags2.map((tag,index)=>{
|
91
91
|
return (
|
92
92
|
<React.Fragment key={index}>
|