superdesk-ui-framework 3.0.1-beta.16 → 3.0.1-beta.18
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/_content-divider.scss +58 -3
- package/app/styles/_master-desk.scss +3 -2
- package/app/styles/components/_sd-photo-preview.scss +2 -2
- package/app/styles/layout/_editor.scss +5 -0
- package/app-typescript/components/ContentDivider.tsx +3 -0
- package/dist/examples.bundle.js +16 -12
- package/dist/react/ContentDivider.tsx +18 -14
- package/dist/superdesk-ui.bundle.css +55 -9
- package/dist/superdesk-ui.bundle.js +2 -0
- package/examples/pages/react/ContentDivider.tsx +18 -14
- package/package.json +1 -1
- package/react/components/ContentDivider.d.ts +1 -0
- package/react/components/ContentDivider.js +2 -0
|
@@ -4,6 +4,9 @@
|
|
|
4
4
|
padding: 0;
|
|
5
5
|
color: $sd-text;
|
|
6
6
|
list-style: none;
|
|
7
|
+
border-bottom: 0;
|
|
8
|
+
border-left: 0;
|
|
9
|
+
border-right: 0;
|
|
7
10
|
border-top: 1px var(--sd-colour-line--medium);
|
|
8
11
|
border-style: solid;
|
|
9
12
|
|
|
@@ -15,6 +18,9 @@
|
|
|
15
18
|
white-space: nowrap;
|
|
16
19
|
text-align: center;
|
|
17
20
|
border-top: 0;
|
|
21
|
+
border-bottom: 0;
|
|
22
|
+
border-left: 0;
|
|
23
|
+
border-right: 0;
|
|
18
24
|
border-top-color: var(--sd-colour-line--medium);
|
|
19
25
|
border-style: solid;
|
|
20
26
|
}
|
|
@@ -24,7 +30,23 @@
|
|
|
24
30
|
clear: both;
|
|
25
31
|
width: 100%;
|
|
26
32
|
min-width: 100%;
|
|
27
|
-
|
|
33
|
+
&.sd-content-divider--margin-x-small {
|
|
34
|
+
margin: $sd-base-increment * 1 0;
|
|
35
|
+
}
|
|
36
|
+
&.sd-content-divider--margin-small {
|
|
37
|
+
margin: $sd-base-increment * 2 0;
|
|
38
|
+
}
|
|
39
|
+
&.sd-content-divider--margin-medium {
|
|
40
|
+
margin: $sd-base-increment * 3 0;
|
|
41
|
+
}
|
|
42
|
+
&.sd-content-divider--margin-large {
|
|
43
|
+
margin: $sd-base-increment * 4 0;
|
|
44
|
+
}
|
|
45
|
+
&.sd-content-divider--margin-none {
|
|
46
|
+
margin: 0 0;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
|
|
28
50
|
}
|
|
29
51
|
&.sd-content-divider--horizontal.sd-content-divider--with-text {
|
|
30
52
|
margin: 1.6rem 0;
|
|
@@ -37,6 +59,8 @@
|
|
|
37
59
|
border-top-color: transparent;
|
|
38
60
|
border-top-color: inherit;
|
|
39
61
|
border-bottom: 0;
|
|
62
|
+
border-left: 0;
|
|
63
|
+
border-right: 0;
|
|
40
64
|
transform: translateY(50%);
|
|
41
65
|
border-style: inherit;
|
|
42
66
|
}
|
|
@@ -56,13 +80,27 @@
|
|
|
56
80
|
width: 5%;
|
|
57
81
|
}
|
|
58
82
|
}
|
|
83
|
+
&.sd-content-divider--margin-x-small {
|
|
84
|
+
margin: $sd-base-increment * 1 0;
|
|
85
|
+
}
|
|
86
|
+
&.sd-content-divider--margin-small {
|
|
87
|
+
margin: $sd-base-increment * 2 0;
|
|
88
|
+
}
|
|
89
|
+
&.sd-content-divider--margin-medium {
|
|
90
|
+
margin: $sd-base-increment * 3 0;
|
|
91
|
+
}
|
|
92
|
+
&.sd-content-divider--margin-large {
|
|
93
|
+
margin: $sd-base-increment * 4 0;
|
|
94
|
+
}
|
|
95
|
+
&.sd-content-divider--margin-none {
|
|
96
|
+
margin: $sd-base-increment / 2 0;
|
|
97
|
+
}
|
|
59
98
|
}
|
|
60
99
|
|
|
61
|
-
|
|
62
100
|
&.sd-content-divider--vertical {
|
|
63
101
|
position: relative;
|
|
64
102
|
display: inline-block;
|
|
65
|
-
margin: $sd-base-increment * 0.5 $sd-base-increment * 1.5;
|
|
103
|
+
//margin: $sd-base-increment * 0.5 $sd-base-increment * 1.5;
|
|
66
104
|
vertical-align: middle;
|
|
67
105
|
border-top: 0;
|
|
68
106
|
border-left: 1px var(--sd-colour-line--medium);
|
|
@@ -86,7 +124,9 @@
|
|
|
86
124
|
position: relative;
|
|
87
125
|
height: 50%;
|
|
88
126
|
border-left: 1px var(--sd-colour-line--medium);
|
|
127
|
+
border-right: 0;
|
|
89
128
|
border-bottom: 0;
|
|
129
|
+
border-top: 0;
|
|
90
130
|
width: 1px;
|
|
91
131
|
border-style: solid;
|
|
92
132
|
}
|
|
@@ -103,6 +143,21 @@
|
|
|
103
143
|
}
|
|
104
144
|
}
|
|
105
145
|
}
|
|
146
|
+
&.sd-content-divider--margin-x-small {
|
|
147
|
+
margin: 0 $sd-base-increment * 1;
|
|
148
|
+
}
|
|
149
|
+
&.sd-content-divider--margin-small {
|
|
150
|
+
margin: 0 $sd-base-increment * 2;
|
|
151
|
+
}
|
|
152
|
+
&.sd-content-divider--margin-medium {
|
|
153
|
+
margin: 0 $sd-base-increment * 3;
|
|
154
|
+
}
|
|
155
|
+
&.sd-content-divider--margin-large {
|
|
156
|
+
margin: 0 $sd-base-increment * 4;
|
|
157
|
+
}
|
|
158
|
+
&.sd-content-divider--margin-none {
|
|
159
|
+
margin: 0 0;
|
|
160
|
+
}
|
|
106
161
|
}
|
|
107
162
|
&.sd-content-divider--dashed {
|
|
108
163
|
border-style: dashed;
|
|
@@ -171,14 +171,15 @@ $board-header-border-color: var(--color-kanban-border);
|
|
|
171
171
|
opacity: 0.4;
|
|
172
172
|
}
|
|
173
173
|
}
|
|
174
|
-
.sd-inset-search__input
|
|
174
|
+
.sd-inset-search__input,
|
|
175
|
+
input.sd-inset-search__input {
|
|
175
176
|
flex-grow: 1;
|
|
176
177
|
flex-shrink: 1;
|
|
177
178
|
font-size: 1.4rem;
|
|
178
179
|
padding: 0;
|
|
179
180
|
color: inherit;
|
|
180
181
|
align-self: auto;
|
|
181
|
-
background-color: transparent;
|
|
182
|
+
background-color: transparent !important;
|
|
182
183
|
border: 0;
|
|
183
184
|
box-shadow: none !important;
|
|
184
185
|
padding: 0 1rem 0 3rem;
|
|
@@ -338,11 +338,11 @@ $photo-nav-transition: all 0.2s ease-out;
|
|
|
338
338
|
}
|
|
339
339
|
|
|
340
340
|
.sd-photo-preview__slide-in-button {
|
|
341
|
-
position: absolute;
|
|
341
|
+
position: absolute !important;
|
|
342
342
|
top: 2.4rem;
|
|
343
343
|
right: 0;
|
|
344
344
|
z-index: 2;
|
|
345
|
-
background-color:
|
|
345
|
+
background-color: hsla(0, 0%, 100%, 0.1);
|
|
346
346
|
height:4.8rem;
|
|
347
347
|
width:4.8rem;
|
|
348
348
|
color: $white;
|
|
@@ -6,6 +6,7 @@ interface IProps {
|
|
|
6
6
|
orientation?: 'horizontal' |'vertical'; // defaults to 'horizontal'
|
|
7
7
|
align?: 'center' | 'left' | 'right'; // defaults to 'center'
|
|
8
8
|
border?: boolean;
|
|
9
|
+
margin?: 'x-small' | 'small' |'medium' | 'large' | 'none';
|
|
9
10
|
children?: React.ReactNode;
|
|
10
11
|
}
|
|
11
12
|
|
|
@@ -19,6 +20,8 @@ export class ContentDivider extends React.PureComponent<IProps> {
|
|
|
19
20
|
[`sd-content-divider--text-${this.props.align}`]: this.props.align || this.props.align !== undefined,
|
|
20
21
|
[`sd-content-divider--${this.props.orientation}`]:
|
|
21
22
|
this.props.orientation || this.props.orientation !== undefined,
|
|
23
|
+
'sd-content-divider--margin-medium': this.props.margin === undefined,
|
|
24
|
+
[`sd-content-divider--margin-${this.props.margin}`]: this.props.margin || this.props.margin !== undefined,
|
|
22
25
|
});
|
|
23
26
|
|
|
24
27
|
if (this.props.children) {
|
package/dist/examples.bundle.js
CHANGED
|
@@ -77108,6 +77108,8 @@ var ContentDivider = /** @class */ (function (_super) {
|
|
|
77108
77108
|
_a["sd-content-divider--".concat(this.props.type)] = this.props.type || this.props.type !== undefined,
|
|
77109
77109
|
_a["sd-content-divider--text-".concat(this.props.align)] = this.props.align || this.props.align !== undefined,
|
|
77110
77110
|
_a["sd-content-divider--".concat(this.props.orientation)] = this.props.orientation || this.props.orientation !== undefined,
|
|
77111
|
+
_a['sd-content-divider--margin-medium'] = this.props.margin === undefined,
|
|
77112
|
+
_a["sd-content-divider--margin-".concat(this.props.margin)] = this.props.margin || this.props.margin !== undefined,
|
|
77111
77113
|
_a));
|
|
77112
77114
|
if (this.props.children) {
|
|
77113
77115
|
return (React.createElement("div", { className: "sd-content-divider--with-text " + classes, role: "separator" },
|
|
@@ -131066,9 +131068,10 @@ var ContentDividerDoc = /** @class */ (function (_super) {
|
|
|
131066
131068
|
React.createElement("p", null, "Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Lorem ipsum dolor sit amet, consectetur adipiscing elit."),
|
|
131067
131069
|
React.createElement(app_typescript_1.ContentDivider, { type: "dashed" }),
|
|
131068
131070
|
React.createElement("p", null, "Donec ullamcorper nulla non metus auctor fringilla. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue."),
|
|
131069
|
-
React.createElement(app_typescript_1.ContentDivider, { type: "dotted" }),
|
|
131070
|
-
React.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac facilisis in, egestas eget quam.")
|
|
131071
|
-
|
|
131071
|
+
React.createElement(app_typescript_1.ContentDivider, { type: "dotted", margin: 'x-small' }),
|
|
131072
|
+
React.createElement("p", null, "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac facilisis in, egestas eget quam."),
|
|
131073
|
+
React.createElement(app_typescript_1.ContentDivider, { type: "dotted", margin: 'x-small' }))),
|
|
131074
|
+
React.createElement(Markup.ReactMarkupCode, null, "\n <p>Maecenas sed diam eget risus varius...</p>\n\n <ContentDivider />\n\n <p>Vestibulum id ligula porta felis euismod...</p>\n\n <ContentDivider type=\"dashed\" />\n\n <p>Donec ullamcorper nulla non metus auctor fringilla...</p>\n\n <ContentDivider type=\"dotted\" margin='x-small' />\n\n <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>\n\n <ContentDivider type=\"dotted\" margin='x-small' />\n ")),
|
|
131072
131075
|
React.createElement("h3", { className: "docs-page__h3" }, "With text"),
|
|
131073
131076
|
React.createElement("p", { className: "docs-page__paragraph" }),
|
|
131074
131077
|
React.createElement(Markup.ReactMarkup, null,
|
|
@@ -131076,11 +131079,11 @@ var ContentDividerDoc = /** @class */ (function (_super) {
|
|
|
131076
131079
|
React.createElement("div", { className: 'docs-page__content-row' },
|
|
131077
131080
|
React.createElement(app_typescript_1.ContentDivider, null, "Centered (default)"),
|
|
131078
131081
|
React.createElement("p", null, "Maecenas sed diam eget risus varius blandit sit amet non magna. Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum."),
|
|
131079
|
-
React.createElement(app_typescript_1.ContentDivider, { align: "left" }, "Left aligned"),
|
|
131082
|
+
React.createElement(app_typescript_1.ContentDivider, { margin: 'small', align: "left" }, "Left aligned, small margin"),
|
|
131080
131083
|
React.createElement("p", null, "Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum. Etiam porta sem malesuada magna mollis euismod. Cras mattis consectetur purus sit amet fermentum."),
|
|
131081
|
-
React.createElement(app_typescript_1.ContentDivider, { align: "right", type: "dotted" }, "Right aligned"),
|
|
131084
|
+
React.createElement(app_typescript_1.ContentDivider, { align: "right", type: "dotted" }, "Right aligned, dotted"),
|
|
131082
131085
|
React.createElement("p", null, "Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros."))),
|
|
131083
|
-
React.createElement(Markup.ReactMarkupCode, null, "\n <ContentDivider>\n Centered (default)\n </ContentDivider>\n\n <p>Maecenas sed diam eget...</p>\n\n <ContentDivider align=\"left\">\n Left aligned\n </ContentDivider>\n\n <p>Maecenas sed diam eget risus...</p>\n\n <ContentDivider align=\"right\" type=\"dotted\">\n Right aligned\n </ContentDivider>\n\n <p>Praesent commodo cursus magna...</p>\n ")),
|
|
131086
|
+
React.createElement(Markup.ReactMarkupCode, null, "\n <ContentDivider>\n Centered (default)\n </ContentDivider>\n\n <p>Maecenas sed diam eget...</p>\n\n <ContentDivider margin='small' align=\"left\">\n Left aligned, small margin\n </ContentDivider>\n\n <p>Maecenas sed diam eget risus...</p>\n\n <ContentDivider align=\"right\" type=\"dotted\">\n Right aligned, dotted\n </ContentDivider>\n\n <p>Praesent commodo cursus magna...</p>\n ")),
|
|
131084
131087
|
React.createElement("h3", { className: "docs-page__h3" }, "Vertical"),
|
|
131085
131088
|
React.createElement("p", { className: "docs-page__paragraph" }),
|
|
131086
131089
|
React.createElement(Markup.ReactMarkup, null,
|
|
@@ -131088,23 +131091,24 @@ var ContentDividerDoc = /** @class */ (function (_super) {
|
|
|
131088
131091
|
React.createElement("p", { className: "docs-page__paragraph" }, "// Basic"),
|
|
131089
131092
|
React.createElement("div", { className: 'docs-page__content-row' },
|
|
131090
131093
|
React.createElement("span", null, "Option one"),
|
|
131091
|
-
React.createElement(app_typescript_1.ContentDivider, { orientation: "vertical", type: "dotted" }),
|
|
131094
|
+
React.createElement(app_typescript_1.ContentDivider, { margin: 'small', orientation: "vertical", type: "dotted" }),
|
|
131092
131095
|
React.createElement("span", null, "Option two"),
|
|
131093
|
-
React.createElement(app_typescript_1.ContentDivider, { orientation: "vertical", type: "dotted" }),
|
|
131096
|
+
React.createElement(app_typescript_1.ContentDivider, { margin: 'small', orientation: "vertical", type: "dotted" }),
|
|
131094
131097
|
React.createElement("span", null, "Option three")),
|
|
131095
131098
|
React.createElement("p", { className: "docs-page__paragraph " }, "// With text"),
|
|
131096
131099
|
React.createElement("p", { className: "docs-page__paragraph--small sd-margin-b--3" }, "Inside a flex container (flex-direction: column;)."),
|
|
131097
131100
|
React.createElement("div", { className: 'docs-page__content-row sd-display--flex' },
|
|
131098
131101
|
React.createElement("div", { style: { width: '100%' } }, "Cras justo odio, dapibus ac facilisis in, egestas eget quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas sed diam eget risus varius blandit sit amet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla sed consectetur. Vivamus sagittis lacus vel augue."),
|
|
131099
|
-
React.createElement(app_typescript_1.ContentDivider, { orientation: "vertical" }, "or"),
|
|
131102
|
+
React.createElement(app_typescript_1.ContentDivider, { orientation: "vertical", margin: 'large' }, "or"),
|
|
131100
131103
|
React.createElement("div", { style: { width: '100%' } }, "Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur purus sit amet fermentum. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam id dolor id nibh ultricies vehicula ut id elit. Donec sed odio dui. Nulla vitae elit libero, a pharetra augue."))),
|
|
131101
|
-
React.createElement(Markup.ReactMarkupCode, null, "\n // Basic\n\n <span>Option one</span>\n <ContentDivider orientation=\"vertical\" type=\"dotted\" />\n <span>Option two</span>\n <ContentDivider orientation=\"vertical\" type=\"dotted\" />\n <span>Option three</span>\n\n // With text\n\n <div>\n Cras justo odio, dapibus ac facilisis in, egestas eget quam...\n </div>\n\n <ContentDivider orientation=\"vertical\">\n or\n </ContentDivider>\n\n <div>\n Praesent commodo cursus magna, vel scelerisque nisl consectetur et...\n </div>\n ")),
|
|
131104
|
+
React.createElement(Markup.ReactMarkupCode, null, "\n // Basic\n\n <span>Option one</span>\n <ContentDivider margin='small' orientation=\"vertical\" type=\"dotted\" />\n <span>Option two</span>\n <ContentDivider margin='small' orientation=\"vertical\" type=\"dotted\" />\n <span>Option three</span>\n\n // With text\n\n <div>\n Cras justo odio, dapibus ac facilisis in, egestas eget quam...\n </div>\n\n <ContentDivider orientation=\"vertical\" margin='large'>\n or\n </ContentDivider>\n\n <div>\n Praesent commodo cursus magna, vel scelerisque nisl consectetur et...\n </div>\n ")),
|
|
131102
131105
|
React.createElement("h3", { className: "docs-page__h3" }, "Props"),
|
|
131103
131106
|
React.createElement(app_typescript_1.PropsList, null,
|
|
131104
131107
|
React.createElement(app_typescript_1.Prop, { name: 'type', isRequired: false, type: 'dashed | dotted | solid', default: 'solid', description: 'Border style of the divider.' }),
|
|
131105
131108
|
React.createElement(app_typescript_1.Prop, { name: 'orientation', isRequired: false, type: 'horizontal | vertical', default: 'horizontal', description: 'Defines if the divider is horizontal or vertical. Default is horizontal.' }),
|
|
131106
131109
|
React.createElement(app_typescript_1.Prop, { name: 'align', isRequired: false, type: 'center | left | right', default: 'right', description: 'Text alignment inside the divider. Should not be used without any text inside the divider. The vertical divider has no alignment options.' }),
|
|
131107
|
-
React.createElement(app_typescript_1.Prop, { name: 'border', isRequired: false, type: 'boolean', default: 'true', description: 'Removes the border if set to true. Should be generally avoided especially if there is textual content. It can be used to add space between elements if there is no other option.' })
|
|
131110
|
+
React.createElement(app_typescript_1.Prop, { name: 'border', isRequired: false, type: 'boolean', default: 'true', description: 'Removes the border if set to true. Should be generally avoided especially if there is textual content. It can be used to add space between elements if there is no other option.' }),
|
|
131111
|
+
React.createElement(app_typescript_1.Prop, { name: 'margin', isRequired: false, type: 'x-small | small | medium | large | none', default: 'medium', description: 'Vertical or horizontal margins (depending on the orientation) of the ContentDivider. Default to medium if not set.' }))));
|
|
131108
131112
|
};
|
|
131109
131113
|
return ContentDividerDoc;
|
|
131110
131114
|
}(React.Component));
|
|
@@ -137768,7 +137772,7 @@ exports.WithSizeObserverDocs = WithSizeObserverDocs;
|
|
|
137768
137772
|
/* 649 */
|
|
137769
137773
|
/***/ (function(module, exports) {
|
|
137770
137774
|
|
|
137771
|
-
module.exports = {"name":"superdesk-ui-framework","version":"3.0.1-beta.
|
|
137775
|
+
module.exports = {"name":"superdesk-ui-framework","version":"3.0.1-beta.18","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}'","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build"},"devDependencies":{"@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/lodash":"^4.14.161","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"5.14.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","lodash":"4.17.21","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-bootstrap":"^0.31.2","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","tslint":"^5.18.0","typescript":"4.5.2","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@material-ui/lab":"^4.0.0-alpha.56","@popperjs/core":"^2.4.0","@superdesk/primereact":"^5.0.2-6","@types/node":"^14.10.2","chart.js":"^2.9.3","date-fns":"2.7.0","moment":"^2.29.3","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-popper":"^2.2.3","react-scrollspy":"^3.4.3"}}
|
|
137772
137776
|
|
|
137773
137777
|
/***/ }),
|
|
137774
137778
|
/* 650 */
|
|
@@ -32,11 +32,12 @@ export default class ContentDividerDoc extends React.Component {
|
|
|
32
32
|
consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo.
|
|
33
33
|
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur
|
|
34
34
|
purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue.</p>
|
|
35
|
-
<ContentDivider type="dotted" />
|
|
35
|
+
<ContentDivider type="dotted" margin='x-small' />
|
|
36
36
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus
|
|
37
37
|
ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet
|
|
38
38
|
risus. Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac
|
|
39
39
|
facilisis in, egestas eget quam.</p>
|
|
40
|
+
<ContentDivider type="dotted" margin='x-small' />
|
|
40
41
|
</div>
|
|
41
42
|
</Markup.ReactMarkupPreview>
|
|
42
43
|
<Markup.ReactMarkupCode>{`
|
|
@@ -50,9 +51,11 @@ export default class ContentDividerDoc extends React.Component {
|
|
|
50
51
|
|
|
51
52
|
<p>Donec ullamcorper nulla non metus auctor fringilla...</p>
|
|
52
53
|
|
|
53
|
-
<ContentDivider type="dotted" />
|
|
54
|
+
<ContentDivider type="dotted" margin='x-small' />
|
|
54
55
|
|
|
55
56
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
|
|
57
|
+
|
|
58
|
+
<ContentDivider type="dotted" margin='x-small' />
|
|
56
59
|
`}
|
|
57
60
|
</Markup.ReactMarkupCode>
|
|
58
61
|
</Markup.ReactMarkup>
|
|
@@ -69,15 +72,15 @@ export default class ContentDividerDoc extends React.Component {
|
|
|
69
72
|
Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus
|
|
70
73
|
auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia
|
|
71
74
|
quam venenatis vestibulum.</p>
|
|
72
|
-
<ContentDivider align="left">
|
|
73
|
-
Left aligned
|
|
75
|
+
<ContentDivider margin='small' align="left">
|
|
76
|
+
Left aligned, small margin
|
|
74
77
|
</ContentDivider>
|
|
75
78
|
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.
|
|
76
79
|
Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur
|
|
77
80
|
purus sit amet fermentum. Etiam porta sem malesuada magna mollis euismod.
|
|
78
81
|
Cras mattis consectetur purus sit amet fermentum.</p>
|
|
79
82
|
<ContentDivider align="right" type="dotted">
|
|
80
|
-
Right aligned
|
|
83
|
+
Right aligned, dotted
|
|
81
84
|
</ContentDivider>
|
|
82
85
|
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
|
|
83
86
|
Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna,
|
|
@@ -93,14 +96,14 @@ export default class ContentDividerDoc extends React.Component {
|
|
|
93
96
|
|
|
94
97
|
<p>Maecenas sed diam eget...</p>
|
|
95
98
|
|
|
96
|
-
<ContentDivider align="left">
|
|
97
|
-
Left aligned
|
|
99
|
+
<ContentDivider margin='small' align="left">
|
|
100
|
+
Left aligned, small margin
|
|
98
101
|
</ContentDivider>
|
|
99
102
|
|
|
100
103
|
<p>Maecenas sed diam eget risus...</p>
|
|
101
104
|
|
|
102
105
|
<ContentDivider align="right" type="dotted">
|
|
103
|
-
Right aligned
|
|
106
|
+
Right aligned, dotted
|
|
104
107
|
</ContentDivider>
|
|
105
108
|
|
|
106
109
|
<p>Praesent commodo cursus magna...</p>
|
|
@@ -115,9 +118,9 @@ export default class ContentDividerDoc extends React.Component {
|
|
|
115
118
|
<p className="docs-page__paragraph">// Basic</p>
|
|
116
119
|
<div className='docs-page__content-row'>
|
|
117
120
|
<span>Option one</span>
|
|
118
|
-
<ContentDivider orientation="vertical" type="dotted" />
|
|
121
|
+
<ContentDivider margin='small' orientation="vertical" type="dotted" />
|
|
119
122
|
<span>Option two</span>
|
|
120
|
-
<ContentDivider orientation="vertical" type="dotted" />
|
|
123
|
+
<ContentDivider margin='small' orientation="vertical" type="dotted" />
|
|
121
124
|
<span>Option three</span>
|
|
122
125
|
</div>
|
|
123
126
|
<p className="docs-page__paragraph ">// With text</p>
|
|
@@ -129,7 +132,7 @@ export default class ContentDividerDoc extends React.Component {
|
|
|
129
132
|
sit amet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla
|
|
130
133
|
sed consectetur. Vivamus sagittis lacus vel augue.
|
|
131
134
|
</div>
|
|
132
|
-
<ContentDivider orientation="vertical">
|
|
135
|
+
<ContentDivider orientation="vertical" margin='large'>
|
|
133
136
|
or
|
|
134
137
|
</ContentDivider>
|
|
135
138
|
<div style={{width:'100%'}}>
|
|
@@ -143,9 +146,9 @@ export default class ContentDividerDoc extends React.Component {
|
|
|
143
146
|
// Basic
|
|
144
147
|
|
|
145
148
|
<span>Option one</span>
|
|
146
|
-
<ContentDivider orientation="vertical" type="dotted" />
|
|
149
|
+
<ContentDivider margin='small' orientation="vertical" type="dotted" />
|
|
147
150
|
<span>Option two</span>
|
|
148
|
-
<ContentDivider orientation="vertical" type="dotted" />
|
|
151
|
+
<ContentDivider margin='small' orientation="vertical" type="dotted" />
|
|
149
152
|
<span>Option three</span>
|
|
150
153
|
|
|
151
154
|
// With text
|
|
@@ -154,7 +157,7 @@ export default class ContentDividerDoc extends React.Component {
|
|
|
154
157
|
Cras justo odio, dapibus ac facilisis in, egestas eget quam...
|
|
155
158
|
</div>
|
|
156
159
|
|
|
157
|
-
<ContentDivider orientation="vertical">
|
|
160
|
+
<ContentDivider orientation="vertical" margin='large'>
|
|
158
161
|
or
|
|
159
162
|
</ContentDivider>
|
|
160
163
|
|
|
@@ -171,6 +174,7 @@ export default class ContentDividerDoc extends React.Component {
|
|
|
171
174
|
<Prop name='orientation' isRequired={false} type='horizontal | vertical' default='horizontal' description='Defines if the divider is horizontal or vertical. Default is horizontal.'/>
|
|
172
175
|
<Prop name='align' isRequired={false} type='center | left | right' default='right' description='Text alignment inside the divider. Should not be used without any text inside the divider. The vertical divider has no alignment options.'/>
|
|
173
176
|
<Prop name='border' isRequired={false} type='boolean' default='true' description='Removes the border if set to true. Should be generally avoided especially if there is textual content. It can be used to add space between elements if there is no other option.'/>
|
|
177
|
+
<Prop name='margin' isRequired={false} type='x-small | small | medium | large | none' default='medium' description='Vertical or horizontal margins (depending on the orientation) of the ContentDivider. Default to medium if not set.'/>
|
|
174
178
|
</PropsList>
|
|
175
179
|
</section>
|
|
176
180
|
)
|
|
@@ -34495,24 +34495,28 @@ tags-input,
|
|
|
34495
34495
|
font-family: 'sd_icons';
|
|
34496
34496
|
opacity: 0.4; }
|
|
34497
34497
|
|
|
34498
|
-
.sd-inset-search__input
|
|
34498
|
+
.sd-inset-search__input,
|
|
34499
|
+
input.sd-inset-search__input {
|
|
34499
34500
|
flex-grow: 1;
|
|
34500
34501
|
flex-shrink: 1;
|
|
34501
34502
|
font-size: 1.4rem;
|
|
34502
34503
|
padding: 0;
|
|
34503
34504
|
color: inherit;
|
|
34504
34505
|
align-self: auto;
|
|
34505
|
-
background-color: transparent;
|
|
34506
|
+
background-color: transparent !important;
|
|
34506
34507
|
border: 0;
|
|
34507
34508
|
box-shadow: none !important;
|
|
34508
34509
|
padding: 0 1rem 0 3rem;
|
|
34509
34510
|
height: auto;
|
|
34510
34511
|
color: inherit; }
|
|
34511
|
-
.sd-inset-search__input::-ms-clear
|
|
34512
|
+
.sd-inset-search__input::-ms-clear,
|
|
34513
|
+
input.sd-inset-search__input::-ms-clear {
|
|
34512
34514
|
display: none; }
|
|
34513
|
-
.sd-inset-search__input:focus
|
|
34515
|
+
.sd-inset-search__input:focus,
|
|
34516
|
+
input.sd-inset-search__input:focus {
|
|
34514
34517
|
box-shadow: unset !important; }
|
|
34515
|
-
.sd-inset-search__input::placeholder
|
|
34518
|
+
.sd-inset-search__input::placeholder,
|
|
34519
|
+
input.sd-inset-search__input::placeholder {
|
|
34516
34520
|
opacity: 0.8;
|
|
34517
34521
|
font-weight: 300; }
|
|
34518
34522
|
|
|
@@ -35135,6 +35139,9 @@ tags-input,
|
|
|
35135
35139
|
padding: 0;
|
|
35136
35140
|
color: var(--color-text);
|
|
35137
35141
|
list-style: none;
|
|
35142
|
+
border-bottom: 0;
|
|
35143
|
+
border-left: 0;
|
|
35144
|
+
border-right: 0;
|
|
35138
35145
|
border-top: 1px var(--sd-colour-line--medium);
|
|
35139
35146
|
border-style: solid; }
|
|
35140
35147
|
.sd-content-divider.sd-content-divider--with-text {
|
|
@@ -35145,14 +35152,26 @@ tags-input,
|
|
|
35145
35152
|
white-space: nowrap;
|
|
35146
35153
|
text-align: center;
|
|
35147
35154
|
border-top: 0;
|
|
35155
|
+
border-bottom: 0;
|
|
35156
|
+
border-left: 0;
|
|
35157
|
+
border-right: 0;
|
|
35148
35158
|
border-top-color: var(--sd-colour-line--medium);
|
|
35149
35159
|
border-style: solid; }
|
|
35150
35160
|
.sd-content-divider.sd-content-divider--horizontal {
|
|
35151
35161
|
display: flex;
|
|
35152
35162
|
clear: both;
|
|
35153
35163
|
width: 100%;
|
|
35154
|
-
min-width: 100%;
|
|
35155
|
-
margin
|
|
35164
|
+
min-width: 100%; }
|
|
35165
|
+
.sd-content-divider.sd-content-divider--horizontal.sd-content-divider--margin-x-small {
|
|
35166
|
+
margin: 0.8rem 0; }
|
|
35167
|
+
.sd-content-divider.sd-content-divider--horizontal.sd-content-divider--margin-small {
|
|
35168
|
+
margin: 1.6rem 0; }
|
|
35169
|
+
.sd-content-divider.sd-content-divider--horizontal.sd-content-divider--margin-medium {
|
|
35170
|
+
margin: 2.4rem 0; }
|
|
35171
|
+
.sd-content-divider.sd-content-divider--horizontal.sd-content-divider--margin-large {
|
|
35172
|
+
margin: 3.2rem 0; }
|
|
35173
|
+
.sd-content-divider.sd-content-divider--horizontal.sd-content-divider--margin-none {
|
|
35174
|
+
margin: 0 0; }
|
|
35156
35175
|
.sd-content-divider.sd-content-divider--horizontal.sd-content-divider--with-text {
|
|
35157
35176
|
margin: 1.6rem 0; }
|
|
35158
35177
|
.sd-content-divider.sd-content-divider--horizontal.sd-content-divider--with-text::before, .sd-content-divider.sd-content-divider--horizontal.sd-content-divider--with-text::after {
|
|
@@ -35164,6 +35183,8 @@ tags-input,
|
|
|
35164
35183
|
border-top-color: transparent;
|
|
35165
35184
|
border-top-color: inherit;
|
|
35166
35185
|
border-bottom: 0;
|
|
35186
|
+
border-left: 0;
|
|
35187
|
+
border-right: 0;
|
|
35167
35188
|
transform: translateY(50%);
|
|
35168
35189
|
border-style: inherit; }
|
|
35169
35190
|
.sd-content-divider.sd-content-divider--horizontal.sd-content-divider--with-text.sd-content-divider--text-left::before {
|
|
@@ -35174,10 +35195,19 @@ tags-input,
|
|
|
35174
35195
|
width: 95%; }
|
|
35175
35196
|
.sd-content-divider.sd-content-divider--horizontal.sd-content-divider--with-text.sd-content-divider--text-right::after {
|
|
35176
35197
|
width: 5%; }
|
|
35198
|
+
.sd-content-divider.sd-content-divider--horizontal.sd-content-divider--with-text.sd-content-divider--margin-x-small {
|
|
35199
|
+
margin: 0.8rem 0; }
|
|
35200
|
+
.sd-content-divider.sd-content-divider--horizontal.sd-content-divider--with-text.sd-content-divider--margin-small {
|
|
35201
|
+
margin: 1.6rem 0; }
|
|
35202
|
+
.sd-content-divider.sd-content-divider--horizontal.sd-content-divider--with-text.sd-content-divider--margin-medium {
|
|
35203
|
+
margin: 2.4rem 0; }
|
|
35204
|
+
.sd-content-divider.sd-content-divider--horizontal.sd-content-divider--with-text.sd-content-divider--margin-large {
|
|
35205
|
+
margin: 3.2rem 0; }
|
|
35206
|
+
.sd-content-divider.sd-content-divider--horizontal.sd-content-divider--with-text.sd-content-divider--margin-none {
|
|
35207
|
+
margin: 0.4rem 0; }
|
|
35177
35208
|
.sd-content-divider.sd-content-divider--vertical {
|
|
35178
35209
|
position: relative;
|
|
35179
35210
|
display: inline-block;
|
|
35180
|
-
margin: 0.4rem 1.2rem;
|
|
35181
35211
|
vertical-align: middle;
|
|
35182
35212
|
border-top: 0;
|
|
35183
35213
|
border-left: 1px var(--sd-colour-line--medium);
|
|
@@ -35200,7 +35230,9 @@ tags-input,
|
|
|
35200
35230
|
position: relative;
|
|
35201
35231
|
height: 50%;
|
|
35202
35232
|
border-left: 1px var(--sd-colour-line--medium);
|
|
35233
|
+
border-right: 0;
|
|
35203
35234
|
border-bottom: 0;
|
|
35235
|
+
border-top: 0;
|
|
35204
35236
|
width: 1px;
|
|
35205
35237
|
border-style: solid; }
|
|
35206
35238
|
.sd-content-divider.sd-content-divider--vertical.sd-content-divider--with-text.sd-content-divider--dashed::before, .sd-content-divider.sd-content-divider--vertical.sd-content-divider--with-text.sd-content-divider--dashed::after {
|
|
@@ -35208,6 +35240,16 @@ tags-input,
|
|
|
35208
35240
|
.sd-content-divider.sd-content-divider--vertical.sd-content-divider--with-text.sd-content-divider--dotted::before, .sd-content-divider.sd-content-divider--vertical.sd-content-divider--with-text.sd-content-divider--dotted::after {
|
|
35209
35241
|
border-style: dotted;
|
|
35210
35242
|
border-color: var(--sd-colour-line--strong); }
|
|
35243
|
+
.sd-content-divider.sd-content-divider--vertical.sd-content-divider--margin-x-small {
|
|
35244
|
+
margin: 0 0.8rem; }
|
|
35245
|
+
.sd-content-divider.sd-content-divider--vertical.sd-content-divider--margin-small {
|
|
35246
|
+
margin: 0 1.6rem; }
|
|
35247
|
+
.sd-content-divider.sd-content-divider--vertical.sd-content-divider--margin-medium {
|
|
35248
|
+
margin: 0 2.4rem; }
|
|
35249
|
+
.sd-content-divider.sd-content-divider--vertical.sd-content-divider--margin-large {
|
|
35250
|
+
margin: 0 3.2rem; }
|
|
35251
|
+
.sd-content-divider.sd-content-divider--vertical.sd-content-divider--margin-none {
|
|
35252
|
+
margin: 0 0; }
|
|
35211
35253
|
.sd-content-divider.sd-content-divider--dashed {
|
|
35212
35254
|
border-style: dashed; }
|
|
35213
35255
|
.sd-content-divider.sd-content-divider--dotted {
|
|
@@ -39566,6 +39608,10 @@ a.text-link {
|
|
|
39566
39608
|
.open-editor .sd-editor__container.sd-editor__container--large {
|
|
39567
39609
|
min-width: 52vw; }
|
|
39568
39610
|
|
|
39611
|
+
.sd-content-wrapper--editor-full .open-editor .sd-editor__container {
|
|
39612
|
+
min-width: auto;
|
|
39613
|
+
max-width: none; }
|
|
39614
|
+
|
|
39569
39615
|
.sd-editor__input--title {
|
|
39570
39616
|
-webkit-appearance: none;
|
|
39571
39617
|
-moz-appearance: none;
|
|
@@ -41471,7 +41517,7 @@ a.text-link {
|
|
|
41471
41517
|
max-height: calc(100vh - 53px - 90px); }
|
|
41472
41518
|
|
|
41473
41519
|
.sd-photo-preview__slide-in-button {
|
|
41474
|
-
position: absolute;
|
|
41520
|
+
position: absolute !important;
|
|
41475
41521
|
top: 2.4rem;
|
|
41476
41522
|
right: 0;
|
|
41477
41523
|
z-index: 2;
|
|
@@ -76369,6 +76369,8 @@ var ContentDivider = /** @class */ (function (_super) {
|
|
|
76369
76369
|
_a["sd-content-divider--".concat(this.props.type)] = this.props.type || this.props.type !== undefined,
|
|
76370
76370
|
_a["sd-content-divider--text-".concat(this.props.align)] = this.props.align || this.props.align !== undefined,
|
|
76371
76371
|
_a["sd-content-divider--".concat(this.props.orientation)] = this.props.orientation || this.props.orientation !== undefined,
|
|
76372
|
+
_a['sd-content-divider--margin-medium'] = this.props.margin === undefined,
|
|
76373
|
+
_a["sd-content-divider--margin-".concat(this.props.margin)] = this.props.margin || this.props.margin !== undefined,
|
|
76372
76374
|
_a));
|
|
76373
76375
|
if (this.props.children) {
|
|
76374
76376
|
return (React.createElement("div", { className: "sd-content-divider--with-text " + classes, role: "separator" },
|
|
@@ -32,11 +32,12 @@ export default class ContentDividerDoc extends React.Component {
|
|
|
32
32
|
consectetur adipiscing elit. Nullam quis risus eget urna mollis ornare vel eu leo.
|
|
33
33
|
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur
|
|
34
34
|
purus sit amet fermentum. Nulla vitae elit libero, a pharetra augue.</p>
|
|
35
|
-
<ContentDivider type="dotted" />
|
|
35
|
+
<ContentDivider type="dotted" margin='x-small' />
|
|
36
36
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dapibus, tellus
|
|
37
37
|
ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet
|
|
38
38
|
risus. Donec id elit non mi porta gravida at eget metus. Cras justo odio, dapibus ac
|
|
39
39
|
facilisis in, egestas eget quam.</p>
|
|
40
|
+
<ContentDivider type="dotted" margin='x-small' />
|
|
40
41
|
</div>
|
|
41
42
|
</Markup.ReactMarkupPreview>
|
|
42
43
|
<Markup.ReactMarkupCode>{`
|
|
@@ -50,9 +51,11 @@ export default class ContentDividerDoc extends React.Component {
|
|
|
50
51
|
|
|
51
52
|
<p>Donec ullamcorper nulla non metus auctor fringilla...</p>
|
|
52
53
|
|
|
53
|
-
<ContentDivider type="dotted" />
|
|
54
|
+
<ContentDivider type="dotted" margin='x-small' />
|
|
54
55
|
|
|
55
56
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
|
|
57
|
+
|
|
58
|
+
<ContentDivider type="dotted" margin='x-small' />
|
|
56
59
|
`}
|
|
57
60
|
</Markup.ReactMarkupCode>
|
|
58
61
|
</Markup.ReactMarkup>
|
|
@@ -69,15 +72,15 @@ export default class ContentDividerDoc extends React.Component {
|
|
|
69
72
|
Maecenas faucibus mollis interdum. Donec ullamcorper nulla non metus
|
|
70
73
|
auctor fringilla. Aenean eu leo quam. Pellentesque ornare sem lacinia
|
|
71
74
|
quam venenatis vestibulum.</p>
|
|
72
|
-
<ContentDivider align="left">
|
|
73
|
-
Left aligned
|
|
75
|
+
<ContentDivider margin='small' align="left">
|
|
76
|
+
Left aligned, small margin
|
|
74
77
|
</ContentDivider>
|
|
75
78
|
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.
|
|
76
79
|
Donec id elit non mi porta gravida at eget metus. Cras mattis consectetur
|
|
77
80
|
purus sit amet fermentum. Etiam porta sem malesuada magna mollis euismod.
|
|
78
81
|
Cras mattis consectetur purus sit amet fermentum.</p>
|
|
79
82
|
<ContentDivider align="right" type="dotted">
|
|
80
|
-
Right aligned
|
|
83
|
+
Right aligned, dotted
|
|
81
84
|
</ContentDivider>
|
|
82
85
|
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
|
|
83
86
|
Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna,
|
|
@@ -93,14 +96,14 @@ export default class ContentDividerDoc extends React.Component {
|
|
|
93
96
|
|
|
94
97
|
<p>Maecenas sed diam eget...</p>
|
|
95
98
|
|
|
96
|
-
<ContentDivider align="left">
|
|
97
|
-
Left aligned
|
|
99
|
+
<ContentDivider margin='small' align="left">
|
|
100
|
+
Left aligned, small margin
|
|
98
101
|
</ContentDivider>
|
|
99
102
|
|
|
100
103
|
<p>Maecenas sed diam eget risus...</p>
|
|
101
104
|
|
|
102
105
|
<ContentDivider align="right" type="dotted">
|
|
103
|
-
Right aligned
|
|
106
|
+
Right aligned, dotted
|
|
104
107
|
</ContentDivider>
|
|
105
108
|
|
|
106
109
|
<p>Praesent commodo cursus magna...</p>
|
|
@@ -115,9 +118,9 @@ export default class ContentDividerDoc extends React.Component {
|
|
|
115
118
|
<p className="docs-page__paragraph">// Basic</p>
|
|
116
119
|
<div className='docs-page__content-row'>
|
|
117
120
|
<span>Option one</span>
|
|
118
|
-
<ContentDivider orientation="vertical" type="dotted" />
|
|
121
|
+
<ContentDivider margin='small' orientation="vertical" type="dotted" />
|
|
119
122
|
<span>Option two</span>
|
|
120
|
-
<ContentDivider orientation="vertical" type="dotted" />
|
|
123
|
+
<ContentDivider margin='small' orientation="vertical" type="dotted" />
|
|
121
124
|
<span>Option three</span>
|
|
122
125
|
</div>
|
|
123
126
|
<p className="docs-page__paragraph ">// With text</p>
|
|
@@ -129,7 +132,7 @@ export default class ContentDividerDoc extends React.Component {
|
|
|
129
132
|
sit amet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Aenean lacinia bibendum nulla
|
|
130
133
|
sed consectetur. Vivamus sagittis lacus vel augue.
|
|
131
134
|
</div>
|
|
132
|
-
<ContentDivider orientation="vertical">
|
|
135
|
+
<ContentDivider orientation="vertical" margin='large'>
|
|
133
136
|
or
|
|
134
137
|
</ContentDivider>
|
|
135
138
|
<div style={{width:'100%'}}>
|
|
@@ -143,9 +146,9 @@ export default class ContentDividerDoc extends React.Component {
|
|
|
143
146
|
// Basic
|
|
144
147
|
|
|
145
148
|
<span>Option one</span>
|
|
146
|
-
<ContentDivider orientation="vertical" type="dotted" />
|
|
149
|
+
<ContentDivider margin='small' orientation="vertical" type="dotted" />
|
|
147
150
|
<span>Option two</span>
|
|
148
|
-
<ContentDivider orientation="vertical" type="dotted" />
|
|
151
|
+
<ContentDivider margin='small' orientation="vertical" type="dotted" />
|
|
149
152
|
<span>Option three</span>
|
|
150
153
|
|
|
151
154
|
// With text
|
|
@@ -154,7 +157,7 @@ export default class ContentDividerDoc extends React.Component {
|
|
|
154
157
|
Cras justo odio, dapibus ac facilisis in, egestas eget quam...
|
|
155
158
|
</div>
|
|
156
159
|
|
|
157
|
-
<ContentDivider orientation="vertical">
|
|
160
|
+
<ContentDivider orientation="vertical" margin='large'>
|
|
158
161
|
or
|
|
159
162
|
</ContentDivider>
|
|
160
163
|
|
|
@@ -171,6 +174,7 @@ export default class ContentDividerDoc extends React.Component {
|
|
|
171
174
|
<Prop name='orientation' isRequired={false} type='horizontal | vertical' default='horizontal' description='Defines if the divider is horizontal or vertical. Default is horizontal.'/>
|
|
172
175
|
<Prop name='align' isRequired={false} type='center | left | right' default='right' description='Text alignment inside the divider. Should not be used without any text inside the divider. The vertical divider has no alignment options.'/>
|
|
173
176
|
<Prop name='border' isRequired={false} type='boolean' default='true' description='Removes the border if set to true. Should be generally avoided especially if there is textual content. It can be used to add space between elements if there is no other option.'/>
|
|
177
|
+
<Prop name='margin' isRequired={false} type='x-small | small | medium | large | none' default='medium' description='Vertical or horizontal margins (depending on the orientation) of the ContentDivider. Default to medium if not set.'/>
|
|
174
178
|
</PropsList>
|
|
175
179
|
</section>
|
|
176
180
|
)
|
package/package.json
CHANGED
|
@@ -4,6 +4,7 @@ interface IProps {
|
|
|
4
4
|
orientation?: 'horizontal' | 'vertical';
|
|
5
5
|
align?: 'center' | 'left' | 'right';
|
|
6
6
|
border?: boolean;
|
|
7
|
+
margin?: 'x-small' | 'small' | 'medium' | 'large' | 'none';
|
|
7
8
|
children?: React.ReactNode;
|
|
8
9
|
}
|
|
9
10
|
export declare class ContentDivider extends React.PureComponent<IProps> {
|
|
@@ -54,6 +54,8 @@ var ContentDivider = /** @class */ (function (_super) {
|
|
|
54
54
|
_a["sd-content-divider--".concat(this.props.type)] = this.props.type || this.props.type !== undefined,
|
|
55
55
|
_a["sd-content-divider--text-".concat(this.props.align)] = this.props.align || this.props.align !== undefined,
|
|
56
56
|
_a["sd-content-divider--".concat(this.props.orientation)] = this.props.orientation || this.props.orientation !== undefined,
|
|
57
|
+
_a['sd-content-divider--margin-medium'] = this.props.margin === undefined,
|
|
58
|
+
_a["sd-content-divider--margin-".concat(this.props.margin)] = this.props.margin || this.props.margin !== undefined,
|
|
57
59
|
_a));
|
|
58
60
|
if (this.props.children) {
|
|
59
61
|
return (React.createElement("div", { className: "sd-content-divider--with-text " + classes, role: "separator" },
|