@bento-core/about 1.0.1-CDS.1 → 1.0.1-CDS.10
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/dist/aboutBodyView.js +121 -9
- package/dist/aboutHeaderView.js +3 -2
- package/package.json +5 -4
- package/src/aboutBodyView.js +139 -16
- package/src/aboutHeaderView.js +2 -1
package/dist/aboutBodyView.js
CHANGED
|
@@ -6,8 +6,10 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
8
|
var _core = require("@material-ui/core");
|
|
9
|
+
var _reactRouterDom = require("react-router-dom");
|
|
9
10
|
var _xoomInOutView = _interopRequireDefault(require("./xoomInOutView"));
|
|
10
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
12
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
11
13
|
const AboutBody = _ref => {
|
|
12
14
|
let {
|
|
13
15
|
classes,
|
|
@@ -57,7 +59,51 @@ const AboutBody = _ref => {
|
|
|
57
59
|
type: "a"
|
|
58
60
|
}, listObj.listWithAlpahbets.map(listObj1 => /*#__PURE__*/_react.default.createElement("li", null, listObj1.includes('$$') ? boldText(listObj1) : listObj1))) : /*#__PURE__*/_react.default.createElement("li", null, listObj.includes('$$') ? boldText(listObj) : listObj)))), contentObj.listWithBullets && /*#__PURE__*/_react.default.createElement("div", {
|
|
59
61
|
className: classes.text
|
|
60
|
-
}, /*#__PURE__*/_react.default.createElement("ul", null, contentObj.listWithBullets.map(listObj =>
|
|
62
|
+
}, /*#__PURE__*/_react.default.createElement("ul", null, contentObj.listWithBullets.map(listObj => {
|
|
63
|
+
// Split the list item by '$$' to detect bolded text or other inline patterns
|
|
64
|
+
const parts = listObj.split('$$').map(splitedItem => {
|
|
65
|
+
// Check for links using regex pattern: [title](url) or (url)[title]
|
|
66
|
+
if (splitedItem != null && (/\[(.+)\]\((.+)\)/g.test(splitedItem) || /\((.+)\)\[(.+)\]/g.test(splitedItem))) {
|
|
67
|
+
const title = splitedItem.match(/\[(.*)\]/).pop();
|
|
68
|
+
const linkAttrs = splitedItem.match(/\((.*)\)/).pop().split(' ');
|
|
69
|
+
const target = linkAttrs.find(link => link.includes('target:'));
|
|
70
|
+
const url = linkAttrs.find(link => link.includes('url:'));
|
|
71
|
+
const href = splitedItem.match(/\((.*)\)/).pop();
|
|
72
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.Link, {
|
|
73
|
+
title: title,
|
|
74
|
+
target: target ? target.replace('target:', '') : '_blank',
|
|
75
|
+
rel: "noreferrer",
|
|
76
|
+
href: url ? url.replace('url:', '') : href && href.includes('@') ? "mailto:".concat(href) : href,
|
|
77
|
+
color: "inherit",
|
|
78
|
+
className: classes.link
|
|
79
|
+
}, title), href.includes('@') || !href.includes('http') ? '' : /*#__PURE__*/_react.default.createElement("img", {
|
|
80
|
+
src: externalIconImage
|
|
81
|
+
// externalIconImage: 'https://raw.githubusercontent.com/CBIIT/datacommons-assets/main/common/images/logos/svgs/externalLinkIcon.svg',
|
|
82
|
+
,
|
|
83
|
+
alt: "outbounnd web site icon",
|
|
84
|
+
className: classes.linkIcon
|
|
85
|
+
}));
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
// Check for bolding inline words using regex
|
|
89
|
+
if (splitedItem != null && /\*(.*)\*/.test(splitedItem)) {
|
|
90
|
+
return /*#__PURE__*/_react.default.createElement("span", {
|
|
91
|
+
className: classes.title
|
|
92
|
+
}, splitedItem.match(/\*(.*)\*/).pop());
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
// For email
|
|
96
|
+
if (splitedItem != null && /@(.*)@/.test(splitedItem)) {
|
|
97
|
+
return /*#__PURE__*/_react.default.createElement("span", {
|
|
98
|
+
className: classes.email
|
|
99
|
+
}, splitedItem.match(/@(.*)@/).pop());
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
// Return the regular text if no special formatting is needed
|
|
103
|
+
return splitedItem;
|
|
104
|
+
});
|
|
105
|
+
return /*#__PURE__*/_react.default.createElement("li", null, parts);
|
|
106
|
+
}))), contentObj.listWithAlpahbets && /*#__PURE__*/_react.default.createElement("div", {
|
|
61
107
|
className: classes.text
|
|
62
108
|
}, /*#__PURE__*/_react.default.createElement("ol", {
|
|
63
109
|
type: "a"
|
|
@@ -66,11 +112,13 @@ const AboutBody = _ref => {
|
|
|
66
112
|
}, contentObj.paragraph.split('$$').map(splitedParagraph => {
|
|
67
113
|
// Checking for regex ()[] pattern
|
|
68
114
|
if (splitedParagraph != null && (/\[(.+)\]\((.+)\)/g.test(splitedParagraph) || /\((.+)\)\[(.+)\]/g.test(splitedParagraph))) {
|
|
69
|
-
const
|
|
115
|
+
const defaultTitle = splitedParagraph.match(/\[(.*)\]/).pop();
|
|
70
116
|
const linkAttrs = splitedParagraph.match(/\((.*)\)/).pop().split(' ');
|
|
117
|
+
const titleMatch = splitedParagraph.match(/title:\s*'([^']+)'/);
|
|
118
|
+
const title = titleMatch ? titleMatch[1].trim() : defaultTitle;
|
|
71
119
|
const target = linkAttrs.find(link => link.includes('target:'));
|
|
72
120
|
const url = linkAttrs.find(link => link.includes('url:'));
|
|
73
|
-
const href =
|
|
121
|
+
const href = linkAttrs[0];
|
|
74
122
|
const link = /*#__PURE__*/_react.default.createElement(_core.Link, {
|
|
75
123
|
title: title,
|
|
76
124
|
target: target ? target.replace('target:', '') : '_blank',
|
|
@@ -78,7 +126,7 @@ const AboutBody = _ref => {
|
|
|
78
126
|
href: url ? url.replace('url:', '') : href && href.includes('@') ? "mailto:".concat(href) : href,
|
|
79
127
|
color: "inherit",
|
|
80
128
|
className: classes.link
|
|
81
|
-
},
|
|
129
|
+
}, defaultTitle);
|
|
82
130
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, link, href.includes('@') || !href.includes('http') ? '' : /*#__PURE__*/_react.default.createElement("img", {
|
|
83
131
|
src: externalIconImage
|
|
84
132
|
// externalIconImage: 'https://raw.githubusercontent.com/CBIIT/datacommons-assets/main/common/images/logos/svgs/externalLinkIcon.svg',
|
|
@@ -226,14 +274,30 @@ const AboutBody = _ref => {
|
|
|
226
274
|
}));
|
|
227
275
|
}
|
|
228
276
|
return splitedParagraph;
|
|
229
|
-
})))) : ''))), data.imageLocation === 'right' && /*#__PURE__*/_react.default.createElement(_core.Grid, {
|
|
277
|
+
})))) : ''))), (data.imageLocation === 'right' || data.actionButtonLabel && data.actionLink) && /*#__PURE__*/_react.default.createElement(_core.Grid, {
|
|
230
278
|
item: true,
|
|
231
279
|
lg: 3,
|
|
232
280
|
md: 3,
|
|
233
281
|
sm: 12,
|
|
234
282
|
xs: 12,
|
|
235
283
|
className: classes.imageSection
|
|
236
|
-
}, data.image
|
|
284
|
+
}, data.image, data.actionButtonLabel && data.actionLink && /*#__PURE__*/_react.default.createElement("div", {
|
|
285
|
+
className: classes.actionSection
|
|
286
|
+
}, data.actionTitle && /*#__PURE__*/_react.default.createElement("div", {
|
|
287
|
+
className: classes.actionTitle
|
|
288
|
+
}, data.actionTitle), /*#__PURE__*/_react.default.createElement(_core.Link, _extends({}, data.actionLink && data.actionLink.includes('http') ? {
|
|
289
|
+
href: data.actionLink,
|
|
290
|
+
target: '_blank',
|
|
291
|
+
rel: 'noreferrer'
|
|
292
|
+
} : {
|
|
293
|
+
component: _reactRouterDom.Link,
|
|
294
|
+
to: data.actionLink
|
|
295
|
+
}, {
|
|
296
|
+
title: data.actionButtonLabel,
|
|
297
|
+
color: "inherit",
|
|
298
|
+
underline: "none",
|
|
299
|
+
className: classes.actionLink
|
|
300
|
+
}), data.actionButtonLabel))))), data.secondaryZoomImageTitle && /*#__PURE__*/_react.default.createElement("div", {
|
|
237
301
|
className: classes.secondayTitle
|
|
238
302
|
}, data.secondaryZoomImageTitle), data.secondaryImage && /*#__PURE__*/_react.default.createElement(_xoomInOutView.default, null, data.secondaryImageData));
|
|
239
303
|
};
|
|
@@ -280,13 +344,61 @@ const styles = () => ({
|
|
|
280
344
|
fontWeight: 'bold'
|
|
281
345
|
}),
|
|
282
346
|
contentSection: {
|
|
283
|
-
padding: props => props.data.imageLocation === 'right' ? '8px 25px 8px 25px !important' : '8px 0px 8px 25px !important',
|
|
347
|
+
padding: props => props.data.imageLocation === 'right' || props.data.actionButtonLabel && props.data.actionLink ? '8px 25px 8px 25px !important' : '8px 0px 8px 25px !important',
|
|
348
|
+
marginBottom: props => props.data.marginBottom ? props.data.marginBottom : 0,
|
|
284
349
|
float: 'left',
|
|
285
350
|
background: 'white'
|
|
286
351
|
},
|
|
287
352
|
imageSection: {
|
|
288
353
|
float: 'left'
|
|
289
354
|
},
|
|
355
|
+
actionSection: {
|
|
356
|
+
display: 'flex',
|
|
357
|
+
width: '100%',
|
|
358
|
+
padding: '25px 25px 35px',
|
|
359
|
+
flexDirection: 'column',
|
|
360
|
+
alignItems: 'center',
|
|
361
|
+
flexShrink: 0,
|
|
362
|
+
border: '0.5px solid #98B5CB',
|
|
363
|
+
background: '#EBF3F7',
|
|
364
|
+
marginTop: '19px'
|
|
365
|
+
},
|
|
366
|
+
actionTitle: {
|
|
367
|
+
color: '#7A9BB1',
|
|
368
|
+
textAlign: 'center',
|
|
369
|
+
fontFamily: 'Lato',
|
|
370
|
+
fontSize: '19px',
|
|
371
|
+
fontStyle: 'normal',
|
|
372
|
+
fontWeight: '700',
|
|
373
|
+
lineHeight: '25px',
|
|
374
|
+
letterSpacing: '0.15px',
|
|
375
|
+
textTransform: 'uppercase',
|
|
376
|
+
wordBreak: 'break-word',
|
|
377
|
+
marginBottom: '22px'
|
|
378
|
+
},
|
|
379
|
+
actionLink: {
|
|
380
|
+
display: 'flex',
|
|
381
|
+
width: '210px',
|
|
382
|
+
height: 'fit-content',
|
|
383
|
+
minHeight: '45px',
|
|
384
|
+
justifyContent: 'center',
|
|
385
|
+
alignItems: 'center',
|
|
386
|
+
gap: '10px',
|
|
387
|
+
flexShrink: '0',
|
|
388
|
+
borderRadius: '10px',
|
|
389
|
+
border: '1px solid #42779A',
|
|
390
|
+
background: '#0E6292',
|
|
391
|
+
color: '#FFF',
|
|
392
|
+
textAlign: 'center',
|
|
393
|
+
fontFamily: 'Lato',
|
|
394
|
+
fontSize: '12px',
|
|
395
|
+
fontStyle: 'normal',
|
|
396
|
+
fontWeight: 600,
|
|
397
|
+
lineHeight: 'normal',
|
|
398
|
+
letterSpacing: '1px',
|
|
399
|
+
wordBreak: 'break-word',
|
|
400
|
+
padding: '15.5px'
|
|
401
|
+
},
|
|
290
402
|
aboutSection: {
|
|
291
403
|
padding: '0px 45px'
|
|
292
404
|
},
|
|
@@ -294,9 +406,9 @@ const styles = () => ({
|
|
|
294
406
|
width: '100%'
|
|
295
407
|
},
|
|
296
408
|
linkIcon: {
|
|
297
|
-
width: '
|
|
409
|
+
width: '1em',
|
|
298
410
|
verticalAlign: 'sub',
|
|
299
|
-
margin: '0px 0px 2px
|
|
411
|
+
margin: '0px 0px 2px 2px'
|
|
300
412
|
},
|
|
301
413
|
link: props => ({
|
|
302
414
|
color: props.linkColor,
|
package/dist/aboutHeaderView.js
CHANGED
|
@@ -24,7 +24,7 @@ const AboutHeader = _ref => {
|
|
|
24
24
|
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
25
25
|
id: "about_title",
|
|
26
26
|
className: classes.titleBody
|
|
27
|
-
}, /*#__PURE__*/_react.default.createElement("
|
|
27
|
+
}, /*#__PURE__*/_react.default.createElement("h1", {
|
|
28
28
|
className: classes.titleText
|
|
29
29
|
}, title))), /*#__PURE__*/_react.default.createElement("div", {
|
|
30
30
|
className: classes.whitePadding
|
|
@@ -50,7 +50,8 @@ const styles = () => ({
|
|
|
50
50
|
color: props.titleColor,
|
|
51
51
|
fontFamily: 'Lato',
|
|
52
52
|
fontSize: '35px',
|
|
53
|
-
fontWeight: 'bold'
|
|
53
|
+
fontWeight: 'bold',
|
|
54
|
+
display: 'inline'
|
|
54
55
|
})
|
|
55
56
|
});
|
|
56
57
|
AboutHeader.defaultProps = {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bento-core/about",
|
|
3
|
-
"version": "1.0.1-CDS.
|
|
3
|
+
"version": "1.0.1-CDS.10",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
"access": "public"
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
|
-
"@bento-core/facet-filter": "^1.0.
|
|
16
|
+
"@bento-core/facet-filter": "^1.0.1-CDS.5",
|
|
17
17
|
"lodash": "^4.17.20",
|
|
18
18
|
"react-zoom-pan-pinch": "*"
|
|
19
19
|
},
|
|
@@ -22,9 +22,10 @@
|
|
|
22
22
|
"clsx": "^1.2.1",
|
|
23
23
|
"react": "^17.0.2",
|
|
24
24
|
"react-dom": "^17.0.0",
|
|
25
|
-
"react-redux": "^7.2.1"
|
|
25
|
+
"react-redux": "^7.2.1",
|
|
26
|
+
"react-router-dom": "^5.1.2"
|
|
26
27
|
},
|
|
27
28
|
"author": "CTOS Bento Team",
|
|
28
29
|
"license": "ISC",
|
|
29
|
-
"gitHead": "
|
|
30
|
+
"gitHead": "37d12f5fc76bbc0e20d841fa0b8b4a908e39e6ed"
|
|
30
31
|
}
|
package/src/aboutBodyView.js
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
|
+
/* eslint-disable max-len */
|
|
1
2
|
import React from 'react';
|
|
2
3
|
import { Grid, Link, withStyles } from '@material-ui/core';
|
|
4
|
+
import { Link as RouterLink } from 'react-router-dom';
|
|
3
5
|
import XoomInOut from './xoomInOutView';
|
|
4
6
|
|
|
5
7
|
const AboutBody = ({
|
|
@@ -46,12 +48,61 @@ const AboutBody = ({
|
|
|
46
48
|
</div>
|
|
47
49
|
)}
|
|
48
50
|
{contentObj.listWithBullets && (
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
51
|
+
<div className={classes.text}>
|
|
52
|
+
<ul>
|
|
53
|
+
{contentObj.listWithBullets.map((listObj) => {
|
|
54
|
+
// Split the list item by '$$' to detect bolded text or other inline patterns
|
|
55
|
+
const parts = listObj.split('$$').map((splitedItem) => {
|
|
56
|
+
// Check for links using regex pattern: [title](url) or (url)[title]
|
|
57
|
+
if (splitedItem != null && (/\[(.+)\]\((.+)\)/g.test(splitedItem) || /\((.+)\)\[(.+)\]/g.test(splitedItem))) {
|
|
58
|
+
const title = splitedItem.match(/\[(.*)\]/).pop();
|
|
59
|
+
const linkAttrs = splitedItem.match(/\((.*)\)/).pop().split(' ');
|
|
60
|
+
const target = linkAttrs.find((link) => link.includes('target:'));
|
|
61
|
+
const url = linkAttrs.find((link) => link.includes('url:'));
|
|
62
|
+
const href = splitedItem.match(/\((.*)\)/).pop();
|
|
63
|
+
|
|
64
|
+
return (
|
|
65
|
+
<>
|
|
66
|
+
<Link
|
|
67
|
+
title={title}
|
|
68
|
+
target={target ? target.replace('target:', '') : '_blank'}
|
|
69
|
+
rel="noreferrer"
|
|
70
|
+
href={url ? url.replace('url:', '') : (href && href.includes('@') ? `mailto:${href}` : href)}
|
|
71
|
+
color="inherit"
|
|
72
|
+
className={classes.link}
|
|
73
|
+
>
|
|
74
|
+
{title}
|
|
75
|
+
</Link>
|
|
76
|
+
{href.includes('@') || !href.includes('http') ? '' : (
|
|
77
|
+
<img
|
|
78
|
+
src={externalIconImage}
|
|
79
|
+
// externalIconImage: 'https://raw.githubusercontent.com/CBIIT/datacommons-assets/main/common/images/logos/svgs/externalLinkIcon.svg',
|
|
80
|
+
alt="outbounnd web site icon"
|
|
81
|
+
className={classes.linkIcon}
|
|
82
|
+
/>
|
|
83
|
+
)}
|
|
84
|
+
</>
|
|
85
|
+
);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
// Check for bolding inline words using regex
|
|
89
|
+
if (splitedItem != null && (/\*(.*)\*/.test(splitedItem))) {
|
|
90
|
+
return <span className={classes.title}>{splitedItem.match(/\*(.*)\*/).pop()}</span>;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
// For email
|
|
94
|
+
if (splitedItem != null && (/@(.*)@/.test(splitedItem))) {
|
|
95
|
+
return <span className={classes.email}>{splitedItem.match(/@(.*)@/).pop()}</span>;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
// Return the regular text if no special formatting is needed
|
|
99
|
+
return splitedItem;
|
|
100
|
+
});
|
|
101
|
+
|
|
102
|
+
return <li>{parts}</li>;
|
|
103
|
+
})}
|
|
104
|
+
</ul>
|
|
105
|
+
</div>
|
|
55
106
|
)}
|
|
56
107
|
{/* Ordered List with Alphabets logic */}
|
|
57
108
|
{contentObj.listWithAlpahbets && (
|
|
@@ -69,11 +120,13 @@ const AboutBody = ({
|
|
|
69
120
|
{ contentObj.paragraph.split('$$').map((splitedParagraph) => {
|
|
70
121
|
// Checking for regex ()[] pattern
|
|
71
122
|
if (splitedParagraph != null && ((/\[(.+)\]\((.+)\)/g.test(splitedParagraph)) || (/\((.+)\)\[(.+)\]/g.test(splitedParagraph)))) {
|
|
72
|
-
const
|
|
123
|
+
const defaultTitle = splitedParagraph.match(/\[(.*)\]/).pop();
|
|
73
124
|
const linkAttrs = splitedParagraph.match(/\((.*)\)/).pop().split(' ');
|
|
125
|
+
const titleMatch = splitedParagraph.match(/title:\s*'([^']+)'/);
|
|
126
|
+
const title = titleMatch ? titleMatch[1].trim() : defaultTitle;
|
|
74
127
|
const target = linkAttrs.find((link) => link.includes('target:'));
|
|
75
128
|
const url = linkAttrs.find((link) => link.includes('url:'));
|
|
76
|
-
const href =
|
|
129
|
+
const href = linkAttrs[0];
|
|
77
130
|
|
|
78
131
|
const link = (
|
|
79
132
|
<Link
|
|
@@ -84,7 +137,7 @@ const AboutBody = ({
|
|
|
84
137
|
color="inherit"
|
|
85
138
|
className={classes.link}
|
|
86
139
|
>
|
|
87
|
-
{
|
|
140
|
+
{defaultTitle}
|
|
88
141
|
</Link>
|
|
89
142
|
);
|
|
90
143
|
|
|
@@ -297,11 +350,33 @@ const AboutBody = ({
|
|
|
297
350
|
</div>
|
|
298
351
|
)}
|
|
299
352
|
</Grid>
|
|
300
|
-
{data.imageLocation === 'right'
|
|
353
|
+
{(data.imageLocation === 'right'
|
|
354
|
+
|| (data.actionButtonLabel && data.actionLink))
|
|
301
355
|
&& (
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
356
|
+
<Grid item lg={3} md={3} sm={12} xs={12} className={classes.imageSection}>
|
|
357
|
+
{data.image}
|
|
358
|
+
|
|
359
|
+
{data.actionButtonLabel && data.actionLink && (
|
|
360
|
+
<div className={classes.actionSection}>
|
|
361
|
+
{data.actionTitle && (
|
|
362
|
+
<div className={classes.actionTitle}>
|
|
363
|
+
{data.actionTitle}
|
|
364
|
+
</div>
|
|
365
|
+
)}
|
|
366
|
+
<Link
|
|
367
|
+
{...(data.actionLink && data.actionLink.includes('http')
|
|
368
|
+
? { href: data.actionLink, target: '_blank', rel: 'noreferrer' }
|
|
369
|
+
: { component: RouterLink, to: data.actionLink })}
|
|
370
|
+
title={data.actionButtonLabel}
|
|
371
|
+
color="inherit"
|
|
372
|
+
underline="none"
|
|
373
|
+
className={classes.actionLink}
|
|
374
|
+
>
|
|
375
|
+
{data.actionButtonLabel}
|
|
376
|
+
</Link>
|
|
377
|
+
</div>
|
|
378
|
+
)}
|
|
379
|
+
</Grid>
|
|
305
380
|
)}
|
|
306
381
|
</Grid>
|
|
307
382
|
</div>
|
|
@@ -355,14 +430,62 @@ const styles = () => ({
|
|
|
355
430
|
fontWeight: 'bold',
|
|
356
431
|
}),
|
|
357
432
|
contentSection: {
|
|
358
|
-
padding: (props) => (props.data.imageLocation === 'right'
|
|
433
|
+
padding: (props) => ((props.data.imageLocation === 'right' || (props.data.actionButtonLabel && props.data.actionLink))
|
|
359
434
|
? '8px 25px 8px 25px !important' : '8px 0px 8px 25px !important'),
|
|
435
|
+
marginBottom: (props) => (props.data.marginBottom ? props.data.marginBottom : 0),
|
|
360
436
|
float: 'left',
|
|
361
437
|
background: 'white',
|
|
362
438
|
},
|
|
363
439
|
imageSection: {
|
|
364
440
|
float: 'left',
|
|
365
441
|
},
|
|
442
|
+
actionSection: {
|
|
443
|
+
display: 'flex',
|
|
444
|
+
width: '100%',
|
|
445
|
+
padding: '25px 25px 35px',
|
|
446
|
+
flexDirection: 'column',
|
|
447
|
+
alignItems: 'center',
|
|
448
|
+
flexShrink: 0,
|
|
449
|
+
border: '0.5px solid #98B5CB',
|
|
450
|
+
background: '#EBF3F7',
|
|
451
|
+
marginTop: '19px',
|
|
452
|
+
},
|
|
453
|
+
actionTitle: {
|
|
454
|
+
color: '#7A9BB1',
|
|
455
|
+
textAlign: 'center',
|
|
456
|
+
fontFamily: 'Lato',
|
|
457
|
+
fontSize: '19px',
|
|
458
|
+
fontStyle: 'normal',
|
|
459
|
+
fontWeight: '700',
|
|
460
|
+
lineHeight: '25px',
|
|
461
|
+
letterSpacing: '0.15px',
|
|
462
|
+
textTransform: 'uppercase',
|
|
463
|
+
wordBreak: 'break-word',
|
|
464
|
+
marginBottom: '22px',
|
|
465
|
+
},
|
|
466
|
+
actionLink: {
|
|
467
|
+
display: 'flex',
|
|
468
|
+
width: '210px',
|
|
469
|
+
height: 'fit-content',
|
|
470
|
+
minHeight: '45px',
|
|
471
|
+
justifyContent: 'center',
|
|
472
|
+
alignItems: 'center',
|
|
473
|
+
gap: '10px',
|
|
474
|
+
flexShrink: '0',
|
|
475
|
+
borderRadius: '10px',
|
|
476
|
+
border: '1px solid #42779A',
|
|
477
|
+
background: '#0E6292',
|
|
478
|
+
color: '#FFF',
|
|
479
|
+
textAlign: 'center',
|
|
480
|
+
fontFamily: 'Lato',
|
|
481
|
+
fontSize: '12px',
|
|
482
|
+
fontStyle: 'normal',
|
|
483
|
+
fontWeight: 600,
|
|
484
|
+
lineHeight: 'normal',
|
|
485
|
+
letterSpacing: '1px',
|
|
486
|
+
wordBreak: 'break-word',
|
|
487
|
+
padding: '15.5px',
|
|
488
|
+
},
|
|
366
489
|
aboutSection: {
|
|
367
490
|
padding: '0px 45px',
|
|
368
491
|
},
|
|
@@ -370,9 +493,9 @@ const styles = () => ({
|
|
|
370
493
|
width: '100%',
|
|
371
494
|
},
|
|
372
495
|
linkIcon: {
|
|
373
|
-
width: '
|
|
496
|
+
width: '1em',
|
|
374
497
|
verticalAlign: 'sub',
|
|
375
|
-
margin: '0px 0px 2px
|
|
498
|
+
margin: '0px 0px 2px 2px',
|
|
376
499
|
},
|
|
377
500
|
link: (props) => ({
|
|
378
501
|
color: props.linkColor,
|
package/src/aboutHeaderView.js
CHANGED
|
@@ -4,7 +4,7 @@ import { withStyles } from '@material-ui/core';
|
|
|
4
4
|
const AboutHeader = ({ classes, title }) => (
|
|
5
5
|
<div className={classes.container}>
|
|
6
6
|
<div className={classes.header}>
|
|
7
|
-
<div id="about_title" className={classes.titleBody}><
|
|
7
|
+
<div id="about_title" className={classes.titleBody}><h1 className={classes.titleText}>{title}</h1></div>
|
|
8
8
|
</div>
|
|
9
9
|
<div className={classes.whitePadding} />
|
|
10
10
|
</div>
|
|
@@ -33,6 +33,7 @@ const styles = () => ({
|
|
|
33
33
|
fontFamily: 'Lato',
|
|
34
34
|
fontSize: '35px',
|
|
35
35
|
fontWeight: 'bold',
|
|
36
|
+
display: 'inline',
|
|
36
37
|
}),
|
|
37
38
|
});
|
|
38
39
|
|