@bento-core/about 1.0.1-CDS.1 → 1.0.1-CDS.11
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 +123 -9
- package/dist/aboutHeaderView.js +3 -2
- package/package.json +5 -4
- package/src/aboutBodyView.js +141 -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,53 @@ 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 defaultTitle = splitedItem.match(/\[(.*)\]/).pop();
|
|
68
|
+
const linkAttrs = splitedItem.match(/\((.*)\)/).pop().split(' ');
|
|
69
|
+
const titleMatch = splitedItem.match(/title:\s*'([^']+)'/);
|
|
70
|
+
const title = titleMatch ? titleMatch[1].trim() : defaultTitle;
|
|
71
|
+
const target = linkAttrs.find(link => link.includes('target:'));
|
|
72
|
+
const url = linkAttrs.find(link => link.includes('url:'));
|
|
73
|
+
const href = linkAttrs[0];
|
|
74
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_core.Link, {
|
|
75
|
+
title: title,
|
|
76
|
+
target: target ? target.replace('target:', '') : '_blank',
|
|
77
|
+
rel: "noreferrer",
|
|
78
|
+
href: url ? url.replace('url:', '') : href && href.includes('@') ? "mailto:".concat(href) : href,
|
|
79
|
+
color: "inherit",
|
|
80
|
+
className: classes.link
|
|
81
|
+
}, defaultTitle), href.includes('@') || !href.includes('http') ? '' : /*#__PURE__*/_react.default.createElement("img", {
|
|
82
|
+
src: externalIconImage
|
|
83
|
+
// externalIconImage: 'https://raw.githubusercontent.com/CBIIT/datacommons-assets/main/common/images/logos/svgs/externalLinkIcon.svg',
|
|
84
|
+
,
|
|
85
|
+
alt: "outbounnd web site icon",
|
|
86
|
+
className: classes.linkIcon
|
|
87
|
+
}));
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
// Check for bolding inline words using regex
|
|
91
|
+
if (splitedItem != null && /\*(.*)\*/.test(splitedItem)) {
|
|
92
|
+
return /*#__PURE__*/_react.default.createElement("span", {
|
|
93
|
+
className: classes.title
|
|
94
|
+
}, splitedItem.match(/\*(.*)\*/).pop());
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
// For email
|
|
98
|
+
if (splitedItem != null && /@(.*)@/.test(splitedItem)) {
|
|
99
|
+
return /*#__PURE__*/_react.default.createElement("span", {
|
|
100
|
+
className: classes.email
|
|
101
|
+
}, splitedItem.match(/@(.*)@/).pop());
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
// Return the regular text if no special formatting is needed
|
|
105
|
+
return splitedItem;
|
|
106
|
+
});
|
|
107
|
+
return /*#__PURE__*/_react.default.createElement("li", null, parts);
|
|
108
|
+
}))), contentObj.listWithAlpahbets && /*#__PURE__*/_react.default.createElement("div", {
|
|
61
109
|
className: classes.text
|
|
62
110
|
}, /*#__PURE__*/_react.default.createElement("ol", {
|
|
63
111
|
type: "a"
|
|
@@ -66,11 +114,13 @@ const AboutBody = _ref => {
|
|
|
66
114
|
}, contentObj.paragraph.split('$$').map(splitedParagraph => {
|
|
67
115
|
// Checking for regex ()[] pattern
|
|
68
116
|
if (splitedParagraph != null && (/\[(.+)\]\((.+)\)/g.test(splitedParagraph) || /\((.+)\)\[(.+)\]/g.test(splitedParagraph))) {
|
|
69
|
-
const
|
|
117
|
+
const defaultTitle = splitedParagraph.match(/\[(.*)\]/).pop();
|
|
70
118
|
const linkAttrs = splitedParagraph.match(/\((.*)\)/).pop().split(' ');
|
|
119
|
+
const titleMatch = splitedParagraph.match(/title:\s*'([^']+)'/);
|
|
120
|
+
const title = titleMatch ? titleMatch[1].trim() : defaultTitle;
|
|
71
121
|
const target = linkAttrs.find(link => link.includes('target:'));
|
|
72
122
|
const url = linkAttrs.find(link => link.includes('url:'));
|
|
73
|
-
const href =
|
|
123
|
+
const href = linkAttrs[0];
|
|
74
124
|
const link = /*#__PURE__*/_react.default.createElement(_core.Link, {
|
|
75
125
|
title: title,
|
|
76
126
|
target: target ? target.replace('target:', '') : '_blank',
|
|
@@ -78,7 +128,7 @@ const AboutBody = _ref => {
|
|
|
78
128
|
href: url ? url.replace('url:', '') : href && href.includes('@') ? "mailto:".concat(href) : href,
|
|
79
129
|
color: "inherit",
|
|
80
130
|
className: classes.link
|
|
81
|
-
},
|
|
131
|
+
}, defaultTitle);
|
|
82
132
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, link, href.includes('@') || !href.includes('http') ? '' : /*#__PURE__*/_react.default.createElement("img", {
|
|
83
133
|
src: externalIconImage
|
|
84
134
|
// externalIconImage: 'https://raw.githubusercontent.com/CBIIT/datacommons-assets/main/common/images/logos/svgs/externalLinkIcon.svg',
|
|
@@ -226,14 +276,30 @@ const AboutBody = _ref => {
|
|
|
226
276
|
}));
|
|
227
277
|
}
|
|
228
278
|
return splitedParagraph;
|
|
229
|
-
})))) : ''))), data.imageLocation === 'right' && /*#__PURE__*/_react.default.createElement(_core.Grid, {
|
|
279
|
+
})))) : ''))), (data.imageLocation === 'right' || data.actionButtonLabel && data.actionLink) && /*#__PURE__*/_react.default.createElement(_core.Grid, {
|
|
230
280
|
item: true,
|
|
231
281
|
lg: 3,
|
|
232
282
|
md: 3,
|
|
233
283
|
sm: 12,
|
|
234
284
|
xs: 12,
|
|
235
285
|
className: classes.imageSection
|
|
236
|
-
}, data.image
|
|
286
|
+
}, data.image, data.actionButtonLabel && data.actionLink && /*#__PURE__*/_react.default.createElement("div", {
|
|
287
|
+
className: classes.actionSection
|
|
288
|
+
}, data.actionTitle && /*#__PURE__*/_react.default.createElement("div", {
|
|
289
|
+
className: classes.actionTitle
|
|
290
|
+
}, data.actionTitle), /*#__PURE__*/_react.default.createElement(_core.Link, _extends({}, data.actionLink && data.actionLink.includes('http') ? {
|
|
291
|
+
href: data.actionLink,
|
|
292
|
+
target: '_blank',
|
|
293
|
+
rel: 'noreferrer'
|
|
294
|
+
} : {
|
|
295
|
+
component: _reactRouterDom.Link,
|
|
296
|
+
to: data.actionLink
|
|
297
|
+
}, {
|
|
298
|
+
title: data.actionButtonTitle || "Visit ".concat(data.actionButtonLabel),
|
|
299
|
+
color: "inherit",
|
|
300
|
+
underline: "none",
|
|
301
|
+
className: classes.actionLink
|
|
302
|
+
}), data.actionButtonLabel))))), data.secondaryZoomImageTitle && /*#__PURE__*/_react.default.createElement("div", {
|
|
237
303
|
className: classes.secondayTitle
|
|
238
304
|
}, data.secondaryZoomImageTitle), data.secondaryImage && /*#__PURE__*/_react.default.createElement(_xoomInOutView.default, null, data.secondaryImageData));
|
|
239
305
|
};
|
|
@@ -280,13 +346,61 @@ const styles = () => ({
|
|
|
280
346
|
fontWeight: 'bold'
|
|
281
347
|
}),
|
|
282
348
|
contentSection: {
|
|
283
|
-
padding: props => props.data.imageLocation === 'right' ? '8px 25px 8px 25px !important' : '8px 0px 8px 25px !important',
|
|
349
|
+
padding: props => props.data.imageLocation === 'right' || props.data.actionButtonLabel && props.data.actionLink ? '8px 25px 8px 25px !important' : '8px 0px 8px 25px !important',
|
|
350
|
+
marginBottom: props => props.data.marginBottom ? props.data.marginBottom : 0,
|
|
284
351
|
float: 'left',
|
|
285
352
|
background: 'white'
|
|
286
353
|
},
|
|
287
354
|
imageSection: {
|
|
288
355
|
float: 'left'
|
|
289
356
|
},
|
|
357
|
+
actionSection: {
|
|
358
|
+
display: 'flex',
|
|
359
|
+
width: '100%',
|
|
360
|
+
padding: '25px 25px 35px',
|
|
361
|
+
flexDirection: 'column',
|
|
362
|
+
alignItems: 'center',
|
|
363
|
+
flexShrink: 0,
|
|
364
|
+
border: '0.5px solid #98B5CB',
|
|
365
|
+
background: '#EBF3F7',
|
|
366
|
+
marginTop: '19px'
|
|
367
|
+
},
|
|
368
|
+
actionTitle: {
|
|
369
|
+
color: '#51718A',
|
|
370
|
+
textAlign: 'center',
|
|
371
|
+
fontFamily: 'Lato',
|
|
372
|
+
fontSize: '19px',
|
|
373
|
+
fontStyle: 'normal',
|
|
374
|
+
fontWeight: '700',
|
|
375
|
+
lineHeight: '25px',
|
|
376
|
+
letterSpacing: '0.15px',
|
|
377
|
+
textTransform: 'uppercase',
|
|
378
|
+
wordBreak: 'break-word',
|
|
379
|
+
marginBottom: '22px'
|
|
380
|
+
},
|
|
381
|
+
actionLink: {
|
|
382
|
+
display: 'flex',
|
|
383
|
+
width: '210px',
|
|
384
|
+
height: 'fit-content',
|
|
385
|
+
minHeight: '45px',
|
|
386
|
+
justifyContent: 'center',
|
|
387
|
+
alignItems: 'center',
|
|
388
|
+
gap: '10px',
|
|
389
|
+
flexShrink: '0',
|
|
390
|
+
borderRadius: '10px',
|
|
391
|
+
border: '1px solid #42779A',
|
|
392
|
+
background: '#0E6292',
|
|
393
|
+
color: '#FFF',
|
|
394
|
+
textAlign: 'center',
|
|
395
|
+
fontFamily: 'Lato',
|
|
396
|
+
fontSize: '12px',
|
|
397
|
+
fontStyle: 'normal',
|
|
398
|
+
fontWeight: 600,
|
|
399
|
+
lineHeight: 'normal',
|
|
400
|
+
letterSpacing: '1px',
|
|
401
|
+
wordBreak: 'break-word',
|
|
402
|
+
padding: '15.5px'
|
|
403
|
+
},
|
|
290
404
|
aboutSection: {
|
|
291
405
|
padding: '0px 45px'
|
|
292
406
|
},
|
|
@@ -294,9 +408,9 @@ const styles = () => ({
|
|
|
294
408
|
width: '100%'
|
|
295
409
|
},
|
|
296
410
|
linkIcon: {
|
|
297
|
-
width: '
|
|
411
|
+
width: '1em',
|
|
298
412
|
verticalAlign: 'sub',
|
|
299
|
-
margin: '0px 0px 2px
|
|
413
|
+
margin: '0px 0px 2px 2px'
|
|
300
414
|
},
|
|
301
415
|
link: props => ({
|
|
302
416
|
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.11",
|
|
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": "0a3211779ab4d1b7d36db34eecfd89e0013f62b8"
|
|
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,63 @@ 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 defaultTitle = splitedItem.match(/\[(.*)\]/).pop();
|
|
59
|
+
const linkAttrs = splitedItem.match(/\((.*)\)/).pop().split(' ');
|
|
60
|
+
const titleMatch = splitedItem.match(/title:\s*'([^']+)'/);
|
|
61
|
+
const title = titleMatch ? titleMatch[1].trim() : defaultTitle;
|
|
62
|
+
const target = linkAttrs.find((link) => link.includes('target:'));
|
|
63
|
+
const url = linkAttrs.find((link) => link.includes('url:'));
|
|
64
|
+
const href = linkAttrs[0];
|
|
65
|
+
|
|
66
|
+
return (
|
|
67
|
+
<>
|
|
68
|
+
<Link
|
|
69
|
+
title={title}
|
|
70
|
+
target={target ? target.replace('target:', '') : '_blank'}
|
|
71
|
+
rel="noreferrer"
|
|
72
|
+
href={url ? url.replace('url:', '') : (href && href.includes('@') ? `mailto:${href}` : href)}
|
|
73
|
+
color="inherit"
|
|
74
|
+
className={classes.link}
|
|
75
|
+
>
|
|
76
|
+
{defaultTitle}
|
|
77
|
+
</Link>
|
|
78
|
+
{href.includes('@') || !href.includes('http') ? '' : (
|
|
79
|
+
<img
|
|
80
|
+
src={externalIconImage}
|
|
81
|
+
// externalIconImage: 'https://raw.githubusercontent.com/CBIIT/datacommons-assets/main/common/images/logos/svgs/externalLinkIcon.svg',
|
|
82
|
+
alt="outbounnd web site icon"
|
|
83
|
+
className={classes.linkIcon}
|
|
84
|
+
/>
|
|
85
|
+
)}
|
|
86
|
+
</>
|
|
87
|
+
);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
// Check for bolding inline words using regex
|
|
91
|
+
if (splitedItem != null && (/\*(.*)\*/.test(splitedItem))) {
|
|
92
|
+
return <span className={classes.title}>{splitedItem.match(/\*(.*)\*/).pop()}</span>;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
// For email
|
|
96
|
+
if (splitedItem != null && (/@(.*)@/.test(splitedItem))) {
|
|
97
|
+
return <span className={classes.email}>{splitedItem.match(/@(.*)@/).pop()}</span>;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
// Return the regular text if no special formatting is needed
|
|
101
|
+
return splitedItem;
|
|
102
|
+
});
|
|
103
|
+
|
|
104
|
+
return <li>{parts}</li>;
|
|
105
|
+
})}
|
|
106
|
+
</ul>
|
|
107
|
+
</div>
|
|
55
108
|
)}
|
|
56
109
|
{/* Ordered List with Alphabets logic */}
|
|
57
110
|
{contentObj.listWithAlpahbets && (
|
|
@@ -69,11 +122,13 @@ const AboutBody = ({
|
|
|
69
122
|
{ contentObj.paragraph.split('$$').map((splitedParagraph) => {
|
|
70
123
|
// Checking for regex ()[] pattern
|
|
71
124
|
if (splitedParagraph != null && ((/\[(.+)\]\((.+)\)/g.test(splitedParagraph)) || (/\((.+)\)\[(.+)\]/g.test(splitedParagraph)))) {
|
|
72
|
-
const
|
|
125
|
+
const defaultTitle = splitedParagraph.match(/\[(.*)\]/).pop();
|
|
73
126
|
const linkAttrs = splitedParagraph.match(/\((.*)\)/).pop().split(' ');
|
|
127
|
+
const titleMatch = splitedParagraph.match(/title:\s*'([^']+)'/);
|
|
128
|
+
const title = titleMatch ? titleMatch[1].trim() : defaultTitle;
|
|
74
129
|
const target = linkAttrs.find((link) => link.includes('target:'));
|
|
75
130
|
const url = linkAttrs.find((link) => link.includes('url:'));
|
|
76
|
-
const href =
|
|
131
|
+
const href = linkAttrs[0];
|
|
77
132
|
|
|
78
133
|
const link = (
|
|
79
134
|
<Link
|
|
@@ -84,7 +139,7 @@ const AboutBody = ({
|
|
|
84
139
|
color="inherit"
|
|
85
140
|
className={classes.link}
|
|
86
141
|
>
|
|
87
|
-
{
|
|
142
|
+
{defaultTitle}
|
|
88
143
|
</Link>
|
|
89
144
|
);
|
|
90
145
|
|
|
@@ -297,11 +352,33 @@ const AboutBody = ({
|
|
|
297
352
|
</div>
|
|
298
353
|
)}
|
|
299
354
|
</Grid>
|
|
300
|
-
{data.imageLocation === 'right'
|
|
355
|
+
{(data.imageLocation === 'right'
|
|
356
|
+
|| (data.actionButtonLabel && data.actionLink))
|
|
301
357
|
&& (
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
358
|
+
<Grid item lg={3} md={3} sm={12} xs={12} className={classes.imageSection}>
|
|
359
|
+
{data.image}
|
|
360
|
+
|
|
361
|
+
{data.actionButtonLabel && data.actionLink && (
|
|
362
|
+
<div className={classes.actionSection}>
|
|
363
|
+
{data.actionTitle && (
|
|
364
|
+
<div className={classes.actionTitle}>
|
|
365
|
+
{data.actionTitle}
|
|
366
|
+
</div>
|
|
367
|
+
)}
|
|
368
|
+
<Link
|
|
369
|
+
{...(data.actionLink && data.actionLink.includes('http')
|
|
370
|
+
? { href: data.actionLink, target: '_blank', rel: 'noreferrer' }
|
|
371
|
+
: { component: RouterLink, to: data.actionLink })}
|
|
372
|
+
title={data.actionButtonTitle || `Visit ${data.actionButtonLabel}`}
|
|
373
|
+
color="inherit"
|
|
374
|
+
underline="none"
|
|
375
|
+
className={classes.actionLink}
|
|
376
|
+
>
|
|
377
|
+
{data.actionButtonLabel}
|
|
378
|
+
</Link>
|
|
379
|
+
</div>
|
|
380
|
+
)}
|
|
381
|
+
</Grid>
|
|
305
382
|
)}
|
|
306
383
|
</Grid>
|
|
307
384
|
</div>
|
|
@@ -355,14 +432,62 @@ const styles = () => ({
|
|
|
355
432
|
fontWeight: 'bold',
|
|
356
433
|
}),
|
|
357
434
|
contentSection: {
|
|
358
|
-
padding: (props) => (props.data.imageLocation === 'right'
|
|
435
|
+
padding: (props) => ((props.data.imageLocation === 'right' || (props.data.actionButtonLabel && props.data.actionLink))
|
|
359
436
|
? '8px 25px 8px 25px !important' : '8px 0px 8px 25px !important'),
|
|
437
|
+
marginBottom: (props) => (props.data.marginBottom ? props.data.marginBottom : 0),
|
|
360
438
|
float: 'left',
|
|
361
439
|
background: 'white',
|
|
362
440
|
},
|
|
363
441
|
imageSection: {
|
|
364
442
|
float: 'left',
|
|
365
443
|
},
|
|
444
|
+
actionSection: {
|
|
445
|
+
display: 'flex',
|
|
446
|
+
width: '100%',
|
|
447
|
+
padding: '25px 25px 35px',
|
|
448
|
+
flexDirection: 'column',
|
|
449
|
+
alignItems: 'center',
|
|
450
|
+
flexShrink: 0,
|
|
451
|
+
border: '0.5px solid #98B5CB',
|
|
452
|
+
background: '#EBF3F7',
|
|
453
|
+
marginTop: '19px',
|
|
454
|
+
},
|
|
455
|
+
actionTitle: {
|
|
456
|
+
color: '#51718A',
|
|
457
|
+
textAlign: 'center',
|
|
458
|
+
fontFamily: 'Lato',
|
|
459
|
+
fontSize: '19px',
|
|
460
|
+
fontStyle: 'normal',
|
|
461
|
+
fontWeight: '700',
|
|
462
|
+
lineHeight: '25px',
|
|
463
|
+
letterSpacing: '0.15px',
|
|
464
|
+
textTransform: 'uppercase',
|
|
465
|
+
wordBreak: 'break-word',
|
|
466
|
+
marginBottom: '22px',
|
|
467
|
+
},
|
|
468
|
+
actionLink: {
|
|
469
|
+
display: 'flex',
|
|
470
|
+
width: '210px',
|
|
471
|
+
height: 'fit-content',
|
|
472
|
+
minHeight: '45px',
|
|
473
|
+
justifyContent: 'center',
|
|
474
|
+
alignItems: 'center',
|
|
475
|
+
gap: '10px',
|
|
476
|
+
flexShrink: '0',
|
|
477
|
+
borderRadius: '10px',
|
|
478
|
+
border: '1px solid #42779A',
|
|
479
|
+
background: '#0E6292',
|
|
480
|
+
color: '#FFF',
|
|
481
|
+
textAlign: 'center',
|
|
482
|
+
fontFamily: 'Lato',
|
|
483
|
+
fontSize: '12px',
|
|
484
|
+
fontStyle: 'normal',
|
|
485
|
+
fontWeight: 600,
|
|
486
|
+
lineHeight: 'normal',
|
|
487
|
+
letterSpacing: '1px',
|
|
488
|
+
wordBreak: 'break-word',
|
|
489
|
+
padding: '15.5px',
|
|
490
|
+
},
|
|
366
491
|
aboutSection: {
|
|
367
492
|
padding: '0px 45px',
|
|
368
493
|
},
|
|
@@ -370,9 +495,9 @@ const styles = () => ({
|
|
|
370
495
|
width: '100%',
|
|
371
496
|
},
|
|
372
497
|
linkIcon: {
|
|
373
|
-
width: '
|
|
498
|
+
width: '1em',
|
|
374
499
|
verticalAlign: 'sub',
|
|
375
|
-
margin: '0px 0px 2px
|
|
500
|
+
margin: '0px 0px 2px 2px',
|
|
376
501
|
},
|
|
377
502
|
link: (props) => ({
|
|
378
503
|
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
|
|